How to Check Color Contrast for Accessibility
Contrast is the difference in luminance between text and its background. Too little and some people can’t read it. Here’s how to check it properly and what the numbers actually require.
- WCAG measures contrast as a ratio from 1:1 (none) to 21:1 (black on white)
- Normal text needs ≥ 4.5:1 for AA; large text needs ≥ 3:1
- AAA is stricter: 7:1 for normal text, 4.5:1 for large
- Don’t eyeball it — light gray on white fails far more often than it looks
- Passing contrast alone doesn’t make a UI accessible — links, icons, and states still need a non-color cue for colorblind users
What the Contrast Ratio Means
WCAG contrast is a ratio of the relative luminance of two colors, from 1:1 (identical, invisible) to 21:1 (pure black on pure white). It’s about luminance, not hue — two colors can look different yet still fail, because their brightness is too close.
The Thresholds You Need to Hit
For WCAG AA (the common legal/practical standard): normal text needs at least 4.5:1, and large text (≈ 24px, or 18.66px bold) needs at least 3:1. For AAA: 7:1 normal, 4.5:1 large. UI components and graphics (icons, input borders) need 3:1 against adjacent colors.
How to Check It
Don’t trust your eyes — perceived contrast is unreliable, especially for light grays and mid-tone color pairs. Paste the two hex values into a contrast checker and read the ratio. Check your real pairs: body text on background, links on background, placeholder text, and text over images or buttons.
How to Fix a Failing Pair
When a pair fails, change lightness, not hue — darken the text or lighten the background until it crosses the threshold. This keeps your brand color recognizable while making it readable. A contrast fixer tool automates this: it nudges lightness the minimum amount needed to reach AA or AAA.
Frequently asked questions
What contrast ratio do I need for accessibility?
For WCAG AA, normal text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text 4.5:1.
Does contrast depend on color or brightness?
Brightness (luminance). Two colors with different hues can still fail if their luminance is too close. That’s why light-gray text on white commonly fails even though it looks fine.
How do I fix a color pair that fails contrast?
Adjust lightness rather than hue: darken the text or lighten the background until the ratio crosses 4.5:1 (or 3:1 for large text). This preserves the hue while making it readable.
Check and fix contrast
Test any text/background pair against WCAG AA and AAA