WCAG Color Contrast Explained
Updated June 2026
Check WCAG color contrast.
If text doesn't contrast enough with its background, many people can't read it. WCAG — the web accessibility guidelines — sets clear minimum contrast ratios.
What is a contrast ratio?
It's the difference in brightness between two colors, from 1:1 (identical, invisible) to 21:1 (black on white). Higher is more readable.
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
"Large text" means about 18pt (24px), or 14pt (18.66px) bold. AA is the common legal/standard target; AAA is the gold standard.
Why it matters
- Readability: low contrast is hard for everyone in bright sunlight or on cheap screens.
- Accessibility: people with low vision or color blindness depend on it.
- Compliance: AA is referenced by laws like the ADA and the European Accessibility Act.
Fixing low contrast
Darken the text or lighten the background (or vice versa) until you hit at least 4.5:1. The checker below shows the ratio and AA/AAA pass/fail live as you adjust your colors.
Check WCAG color contrast.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text to meet WCAG AA — the most common target. Aim for 7:1 (AAA) where you can.
Does contrast apply to icons and buttons?
Yes — meaningful graphics and UI components have their own 3:1 minimum under WCAG 2.1.