WCAG Contrast Checker — Test Colour Accessibility
Check text and background colours against WCAG AA and AAA, with a fix suggestion.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Large heading text — 24px
Bold 19px text also counts as large
Normal body text at 16px. This is the size most of your content will actually be, so it is the threshold that matters most in practice.
Small print at 13px
Enter a text colour and a background colour to get the contrast ratio and a pass or fail against every WCAG level. A live preview shows the combination at four real text sizes.
When a pair falls short, the tool works out the nearest shade of your text colour that passes — so you can fix it without abandoning the palette.
How to use Contrast Checker
- Set your text and background colours using the pickers or by typing HEX, RGB or a CSS colour name.
- Read the ratio and the pass/fail grid.
- Check the preview — it shows the combination at 24px, 19px bold, 16px and 13px.
- Apply the suggestion if the pair fails.
What the thresholds mean
WCAG 2.1 sets contrast minimums by text size and conformance level:
- AA, normal text — 4.5:1. This is the legal baseline in most jurisdictions and the one that matters most, because it applies to your body copy.
- AA, large text — 3:1. "Large" means 24px regular or 18.66px bold and above.
- AAA, normal text — 7:1. An enhanced level, required for some government and public-sector work.
- Non-text — 3:1. Applies to UI components, form borders, icons and chart elements that convey meaning. This one is widely missed: a form input with a faint grey border can fail even when its label passes.
How the ratio is calculated
Contrast is (L1 + 0.05) ÷ (L2 + 0.05), where L is relative luminance with the sRGB gamma curve applied. The 0.05 models ambient light reflecting off the screen, which is why pure black on pure white is 21:1 rather than infinite. Luminance weights green far more heavily than blue, because human vision is far more sensitive to it — this is why a mid-green and a mid-blue of the same "brightness" on screen can have wildly different contrast.
Contrast is not just for people with low vision
Around 1 in 12 men has some form of colour vision deficiency, but poor contrast affects everyone: an ageing eye needs more light, and anyone reading a phone in sunlight is temporarily in the same position. Designing to 4.5:1 makes the interface better for all of your users, not a minority of them.
One thing this tool cannot check: whether colour is your only way of conveying information. A red-only error state fails regardless of its contrast ratio — pair it with an icon or text.
Frequently asked questions
What contrast ratio do I actually need?
4.5:1 for normal body text to meet WCAG AA — the legal baseline in most jurisdictions. 3:1 for large text (24px, or 18.66px bold) and for UI components like form borders and icons. 7:1 for AAA.
Why is pure black on white 21:1 and not infinite?
The formula adds 0.05 to both luminance values to model ambient light reflecting off the screen. Real screens are never perfectly black in a real room, so the ratio is capped at 21:1.
My brand colour fails. What now?
Use it where the threshold is lower — large headings, buttons with white text, borders, backgrounds — and darken it for body copy. The suggestion above finds the nearest passing shade of the same hue, so the palette still holds together.
Does passing contrast make my site accessible?
No — it clears one requirement. Contrast says nothing about keyboard navigation, focus indicators, alt text, heading structure or whether colour is your only means of conveying information. A red-only error state fails regardless of its ratio.