Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and many more people read screens in bright sunlight or with low vision. Accessible color choices help all of them.
What is a contrast ratio?
WCAG measures the difference in relative luminance between two colors. The ratio goes from 1:1 (identical) to 21:1 (black on white). It depends only on brightness, not on hue — so red text on green can fail even though the hues are very different.
The thresholds you need
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or ~18.7px bold) | 3:1 | 4.5:1 |
| Icons, borders of inputs, focus rings | 3:1 | — |
Common failing combinations
- Light gray placeholder text on white (often around 2.5:1).
- White text on bright yellow, orange or light green buttons.
- Thin colored text on photos without an overlay.
How to fix a failing pair
Keep the hue and change lightness. For example, the link blue #0066CC passes AA on white at about 5.6:1, while a lighter blue would not. The contrast checker suggests the nearest passing color automatically.
Do not rely on color alone
Error and success states should combine color with text or icons. A red border plus the message "Email is required" works for everyone; a red border alone does not. Check your status colors in the color blindness simulator.
Audit a whole palette
The palette accessibility analyzer tests every pair in your palette and lists combinations that are safe for text.
