Resource
Color Contrast Guide
Color contrast ensures text is readable for users with low vision or color blindness. WCAG requires specific contrast ratios.
WCAG Contrast Requirements
| Level | Ratio | Applies To |
|---|---|---|
| AA (Normal Text) | 4.5:1 | Required for text under 18pt (or 14pt bold) |
| AA (Large Text) | 3:1 | For text 18pt+ or 14pt+ bold |
| AA (UI Components) | 3:1 | For buttons, icons, form borders |
| AAA (Normal Text) | 7:1 | Enhanced contrast for all text |
| AAA (Large Text) | 4.5:1 | Enhanced for large text |
Examples
Sample Text
Ratio: 7.0:1
AAASample Text
Ratio: 4.54:1
AASample Text
Ratio: 2.85:1
FailSample Text
Ratio: 4.86:1
AABest Practices
- Test contrast in both light and dark mode
- Don't rely on color alone—use icons, text, or patterns
- Check contrast for hover and focus states too
- Consider users with color blindness
- Test with actual content, not just design mockups
- Remember: placeholder text needs contrast too