Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments.
The contrast ratio
Contrast ratio is calculated as:
(L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's relative luminance and L2 is the darker one's. Ratios range from 1:1 (identical colors) to 21:1 (black on white).
WCAG levels
Level AA (minimum standard)
- Normal text (under 18pt or 14pt bold): minimum ratio of 4.5:1
- Large text (18pt+ or 14pt+ bold): minimum ratio of 3:1
- UI components and graphical objects: minimum ratio of 3:1
Level AAA (enhanced)
- Normal text: minimum ratio of 7:1
- Large text: minimum ratio of 4.5:1
Common failures
Dark grey text on a dark background is the most common mistake. Tools like our Contrast Checker instantly flag these issues.
Tips for good contrast
Do not rely on color alone to convey information. Supplement color with patterns, icons, or labels. Test with a grayscale filter to see how your design holds up without color.
Automatic tools
Use our Contrast Checker to test any foreground and background combination against both AA and AAA standards.