WCAG color contrast explained (AA, AAA and the 4.5:1 rule)
Contrast is the single biggest lever for readable, accessible color. The good news: it is one number, and the rules for passing it are short.
What the ratio measures
WCAG contrast is the ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). It is not about hue — a red and a green of similar brightness can fail badly. Test any pair in the Contrast Checker.
The thresholds you actually need
- Normal text: 4.5:1 for AA, 7:1 for AAA.
- Large text (18px bold, or 24px regular): 3:1 for AA, 4.5:1 for AAA.
- UI components & graphics (icons, borders, focus rings): 3:1, no AAA tier.
Most products target AA. AAA is worth it for long-form reading or accessibility-first products.
Fixing a failing combination
- Keep the hue, change the lightness — darken text or lighten the background until it passes.
- If the brand color must stay, use it for large text or non-text UI (which only need 3:1).
- Validate the whole system at once in the WCAG Validator.
#999 on #fff is only 2.8:1 and fails AA. #767676 is the lightest grey that passes.Frequently asked questions
What contrast ratio do I need to pass WCAG?
4.5:1 for normal body text (AA) and 3:1 for large text or UI elements. AAA raises those to 7:1 and 4.5:1.
Does contrast depend on color or just brightness?
Only on relative luminance (brightness), not hue. Two colors with similar luminance always have low contrast regardless of how different they look.
Is white text on a colored button accessible?
Only if the button color is dark enough. Check the exact pair in the Contrast Checker — many mid-tone brand colors fail 4.5:1 with white text.