Contrast is the most-cited accessibility issue in automated audits, and the most fixable. Get it right and your design is more readable for everyone — not just users with low vision. This guide covers the WCAG requirements, the math behind them, and the practical failures to watch for.
The WCAG Requirements
| Element | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (under 18pt or under 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
| Decorative content | No requirement | No requirement |
| Logos & brand | Exempt | Exempt |
How Contrast Is Measured
WCAG contrast uses relative luminance — a perceptual measure of how light or dark a color appears. The formula:
Contrast = (L_lighter + 0.05) / (L_darker + 0.05)Where L is computed from gamma-corrected RGB. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). Note that pure hue contrast doesn't help — bright red on bright green has high color contrast but poor luminance contrast.
Common Failures
- Light gray on white. #999 on white is 2.85:1 — fails AA. #767676 is the minimum that passes AA (4.54:1).
- Placeholder text. Often styled at very low contrast; treat as required content and apply AA rules.
- Buttons on bright colors. White text on yellow or light blue typically fails. Test before shipping.
- Disabled states. WCAG technically exempts disabled elements, but readable disabled states improve UX. Aim for 3:1.
- Focus rings. The focus indicator needs 3:1 against both the unfocused element and the page background.
- Color-only signals. Red text alone for errors fails users with color blindness. Always pair with icon or label.
A Reliable Workflow
- Pick text and background pairs early, check ratios with a tool, lock them into design tokens.
- Establish a "minimum text color" — the lightest gray that passes AA on your background.
- Test interactive states (hover, focus, active, disabled) for contrast too.
- Run automated audits (axe, Lighthouse, WAVE) on every page before shipping.
- Test with real low-vision users or contrast simulators for nuanced issues.
Try It Yourself
Extract a palette and verify contrast across all color pairs with DesignKit's color tools.
Color Palette Extractor →