Color contrast checker
Check whether two colours meet the WCAG accessibility standards.
What the ratio means
Contrast is the difference in relative luminance between two colours, expressed as a ratio. Black on white is 21:1, the maximum. Identical colours are 1:1. WCAG sets the thresholds that make text readable for people with low vision, which is a great many more people than most designers assume.
The thresholds
- 4.5:1 — AA for normal text. The practical baseline, and what most legislation references.
- 3:1 — AA for large text (18pt, or 14pt bold) and for user-interface components such as input borders and icons.
- 7:1 — AAA for normal text. Worth aiming for on body copy that will be read at length.
The failure this tool exists to prevent
Light grey text on white. It looks refined in a design tool on a bright screen, and it disappears on a phone outdoors, on a dimmed laptop, or for anyone over about fifty. #999 on white is 2.8:1 and fails at every level.
Worth stating plainly: the previous version of this tool always returned 21:1 and passed, because it read fields the form never sent and silently compared black against white. Every colour pair anyone checked came back approved. If you used it, re-check your palette.
What it cannot judge
Contrast is necessary, not sufficient. Text over a photograph varies pixel by pixel; check the worst region rather than the average. Very thin fonts read worse than the ratio suggests. And contrast says nothing about colour blindness — a red/green pair can pass comfortably and still be indistinguishable to eight percent of men.
Nothing is uploaded
The calculation runs in your browser as you type.
Common questions
What ratio do I need?
4.5:1 for normal text, 3:1 for large text and UI components, 7:1 for AAA.
Is grey on white acceptable?
Often not. #999 on white is 2.8:1 and fails every level, despite looking fine on a bright screen.
What counts as large text?
18pt, or 14pt bold. Larger text needs less contrast to stay readable.
Does this cover colour blindness?
No. A red/green pair can pass contrast and still be indistinguishable to around 8% of men.
How do I check text on an image?
Sample the lightest and darkest regions behind the text and check the worst case, not the average.