WCAG Color Contrast Explained
Low contrast locks out users and hurts readability. The ratios are simple — 4.5:1 for body text — and easy to check and fix.
Why contrast matters
Colour contrast is the difference in luminance between text and its background. Too little and text becomes unreadable for users with low vision — and unpleasant for everyone. WCAG sets measurable minimums.
Check any pair with the free contrast checker.
The WCAG thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
"Large" means 18pt (24px) or 14pt (18.66px) bold and larger. Ratios run from 1:1 (identical) to 21:1 (black on white).
Where contrast fails most
- Light grey text on white ("subtle" captions).
- Placeholder text in form fields.
- Text over photos or gradients.
- Buttons with coloured text on coloured fill.
- Focus outlines that vanish.
How to check
- Pick the text and background colours (use a colour picker).
- Compute the ratio with the WCAG contrast checker.
- Adjust until you pass the level you target.
How to fix
- Darken the text — the usual fix for grey-on-white.
- Lighten the background.
- Increase font weight or size (large-text rules are more lenient).
- Add a solid background behind text over images.
- Add a subtle outline/shadow for text on photos.
Don't rely on colour alone
Colour-blind users may miss meaning conveyed only by colour (red/green status). Add icons, labels or patterns. WCAG calls this "use of colour" (1.4.1).
Aim higher than the minimum
AA is the legal baseline in many contexts; AAA (7:1) is more comfortable. For body copy, target at least 7:1 where you can — readers will thank you.
Check your palette
Run your brand colours through the contrast checker before shipping a design system, not after.