Color Contrast Checker
Check the contrast ratio between two colours against the WCAG accessibility standards, with the pass and fail thresholds for normal and large text.
| Level | Normal text | Large text |
|---|---|---|
| WCAG AA | — | — |
| WCAG AAA | — | — |
No CSS named colour works on both white and black
To clear 4.5:1 against white a colour needs relative luminance at or below 0.18333; to clear it against black it needs 0.175 or above. Both are possible, but only inside a band 0.00833 wide — 0.83% of a scale that runs from 0 to 1.
| Of the 148 named colours | Count |
|---|---|
| Pass 4.5:1 on white | 32 |
| Pass 4.5:1 on black | 116 |
| Pass on both | 0 |
| Pass on neither | 0 |
The split is exact and exhaustive: every named colour clears exactly one background and fails the other. There is no colour in the language you can set once and forget. The band is not empty — roughly 1.7% of the colour cube lands in it — but none of the named colours happen to. Among plain greys exactly two manage it: #757575 and #767676. Those are the only greys that read on a light page and a dark one without being changed.
The formula is nearly three-quarters green
Relative luminance weights the channels 0.2126 red, 0.7152 green and 0.0722 blue, which is roughly how the eye responds — and means one channel decides almost everything.
| Colour | On black | On white |
|---|---|---|
| red | 5.25:1 | 4.00:1 |
| green | 15.30:1 | 1.37:1 |
| blue | 2.44:1 | 8.59:1 |
| yellow | 19.56:1 | 1.07:1 |
| cyan | 16.75:1 | 1.25:1 |
| magenta | 6.70:1 | 3.14:1 |
Blue and green are near mirror images. Pure blue on black is 2.44:1 and fails every level WCAG defines, including the lenient 3:1 for large text. Pure green on white is 1.37:1, worse still. Red is the only primary that comes close to working on both, at 5.25 and 4.00 — and it still fails on white. Nothing can beat 21:1, incidentally: that is (1 + 0.05) over (0 + 0.05), and the 0.05 is a flare term that keeps the ratio finite. The ratio is also symmetric — it does not know which colour is the text — even though reading light-on-dark is not the same experience as dark-on-light.
And the verdicts are closer than a pass or a fail suggests. Nudging one channel by a single hex digit (17 steps) flips the result for 16 of the named colours against white — crimson goes from 4.99 to 4.41. A colour that scrapes past is worth treating as a colour that failed.
A bug in the standard that cannot happen
The sRGB standard switches from a linear segment to a power curve at 0.04045. WCAG's formula — the one this page implements, because it is the one conformance is measured against — uses 0.03928, an older figure that was never corrected. It is a real error in a real specification. It also has no effect whatsoever. The two thresholds sit at channel values 10.02 and 10.31, and there is no whole number between them — so across all 256 values a channel can take, not one is treated differently. Every ratio, every pass and every fail is identical under both. It is a bug worth knowing about mostly so you can stop worrying about it.
How to use
- Enter your text colour and background colour.
- Read the contrast ratio and which levels it passes.
- Adjust the lighter or darker colour until it passes.
- Check large text and interface components separately.
Frequently asked questions
What contrast ratio do I need?
For normal body text, at least 4.5 to 1 to meet WCAG level AA, or 7 to 1 for the stricter AAA. Large text — 18 point, or 14 point bold — needs only 3 to 1. Interface components and meaningful graphics need 3 to 1 as well.
How is the ratio calculated?
From relative luminance, not from how different the colours look. Each channel is converted from its stored value to linear light, weighted for how sensitive the eye is to it, and combined. The ratio compares the lighter result against the darker, running from 1 to 1 for identical colours up to 21 to 1 for black on white.
Why do two colours that look different fail?
Because the eye is far better at distinguishing hue than luminance. Two vivid colours of similar brightness — a mid red on a mid green, say — look strongly different and have almost no contrast. That is exactly the case someone with a colour vision deficiency cannot read at all.
Does this apply to text over an image?
Yes, and it is harder to satisfy, because the background varies across the image. The usual solutions are an overlay that darkens or lightens the image behind the text, a solid panel behind the text, or a text shadow — and the ratio has to hold at the worst point, not the average.
What about placeholder text and disabled controls?
Disabled controls are explicitly exempt from the contrast requirement, but placeholder text is not — it is real text and needs to meet the ratio. Faint placeholder text is one of the commonest accessibility failures on the web, partly because browser defaults are themselves too light.
Is meeting the ratio enough?
It is a floor, not a guarantee. Contrast requirements say nothing about font size, line height, letter spacing or whether the type is legible at all. Passing the check and remaining hard to read is entirely possible, and testing with real users catches what a formula cannot.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.