What Is Color Contrast and Why It Matters for Web Accessibility
Approximately 300 million people worldwide have some form of color blindness, and many more have low vision. Poor text contrast is one of the most common accessibility failures on the web — and one of the easiest to fix. This guide explains contrast ratios, WCAG requirements, and how to check your site.
What Is Contrast Ratio?
Contrast ratio measures the difference in luminance (perceived brightness) between a foreground colour and a background colour. It's expressed as a ratio: 1:1 (identical colours) to 21:1 (pure black on pure white).
Light grey on white — contrast ratio 4.54:1 (passes AA for normal text)
Off-white on dark slate — contrast ratio ~15:1 (passes AAA)
White on yellow — contrast ratio 1.9:1 (fails all levels)
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios at two levels:
| Level | Normal text | Large text (18pt+ / bold 14pt+) | UI components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
Most websites aim for WCAG AA compliance at minimum. Many governments and organisations (especially in public sector and e-commerce) legally require it. AAA is recommended for critical content like health or legal information.
Common Contrast Failures
Light grey text on white
A common "modern minimal" design choice. Grey #999999 on white has a 2.85:1 ratio — failing WCAG AA for all text sizes.
White text on light brand colours
Many brand palettes use light tones (pastel blue, mint, yellow) where white text fails. Check before committing.
Coloured text on coloured backgrounds
Orange on red, blue on purple — high saturation combinations with poor luminance difference.
Placeholder text in forms
Placeholder text is often styled very light to distinguish it from real input. It frequently fails contrast requirements.
Disabled state text
Intentionally low contrast on disabled elements is exempt from WCAG — but consider using patterns or labels instead.
How to Check Color Contrast
Use our Contrast Checker to enter any two hex colour codes and see the contrast ratio, WCAG AA and AAA pass/fail status for both normal and large text.
Other useful tools: the axe browser extension (Chrome/Firefox) scans your live website for contrast failures; Figma's built-in accessibility plugin checks contrast in your designs; Chrome DevTools highlights low-contrast text in the Accessibility panel.
Check WCAG contrast compliance — free
Contrast Checker