Every checker gives the same number. The number is not the useful part.
The contrast ratio is four lines of arithmetic and nobody disagrees about it. What almost no checker explains is why a pair of colours you can obviously tell apart scores 2.4:1, and that is the only part anyone needs, because without it the fix is guesswork.
There are two reasons, and between them they cover nearly every surprising result.
Green carries 71.52% of the weight. Blue carries 7.22%.
Relative luminance is 0.2126 red + 0.7152 green + 0.0722 blue, weighted roughly the way the human eye responds. That produces results which look wrong until you know the weighting:
| On black | Ratio | Verdict |
|---|---|---|
| Pure green | 15.3:1 | Passes everything |
| Pure red | 5.25:1 | Passes AA |
| Pure blue | 2.44:1 | Fails everything |
Blue catches people out. It looks perfectly legible on screen and contributes almost nothing to the measurement. If a blue is failing and you cannot see why, that is the reason, and the fix is to change its lightness, not its saturation.
And the channels are linearised before any of that
A screen does not emit light in proportion to the number in the file. 50% grey emits about 21.6% of the light of white, not 50%. So each channel goes through the sRGB transfer function before it is weighted.
This is why mid greys behave so much worse than they look, and why "I can read it fine" is not evidence. The test is not modelling you on your monitor in your office. It is modelling somebody with different vision, in worse light, on a cheaper screen.
Four thresholds, and one of them is not about text at all
- 4.5:1 AA, normal text. The one everybody quotes.
- 3:1 AA, large text. 18pt (24px), or 14pt bold (about 18.66px).
- 7:1 and 4.5:1 AAA, normal and large. A target, not a requirement.
- 3:1 non-text, under 1.4.11. Icons, form borders, focus rings.
"Large" is a size, not a judgement, and it is the exemption claimed wrongly more than any other. A 20px heading is normal text and needs the full 4.5:1.
The non-text rule is the one most sites fail without knowing it exists. A pale grey border on a white form input is routinely about 1.5:1, which means the user genuinely cannot see where the box is. Focus rings are the same story, and they matter more, because the people relying on them have no other way to tell where they are on the page.
Two things this deliberately will not do
It ignores alpha. If you paste a colour with transparency, the alpha is dropped rather than guessed at, because the real contrast depends entirely on what is behind it. A confident answer there would be a wrong one.
And passing this is not being accessible. Contrast is one success criterion out of dozens. It says nothing about keyboard navigation, focus order, form labels, heading structure or alt text. It is worth fixing because it is objective and fast, and it is a floor rather than a finish line.
Common questions
What contrast ratio do I actually need?
4.5:1 for normal text and 3:1 for large text is WCAG AA, and AA is the level that regulations and procurement standards reference. AAA asks for 7:1 and 4.5:1 and is a target rather than a requirement: WCAG itself says AAA is not achievable for all content. There is also a flat 3:1 for non-text things that carry meaning, which is the one most sites fail without knowing it exists.
What counts as large text?
18pt, which is 24px, or 14pt bold, which is about 18.66px. It is a font size rather than a judgement, and it is the most commonly misclaimed exemption on the whole standard. A 20px heading feels large and is normal text as far as WCAG is concerned, so it needs the full 4.5:1.
Why does my blue text fail when it looks perfectly readable?
Because relative luminance weights green at 71.52%, red at 21.26% and blue at only 7.22%, which is roughly how the human eye responds to each. Blue therefore contributes almost nothing to the measured contrast however bright it looks. Pure blue on black is 2.44:1 and fails everything including large text, while pure green on black is 15.3:1 and passes at any size. If a blue is failing and you cannot see why, that is the reason, and the fix is lightness rather than saturation.
Why do two colours I can clearly tell apart still fail?
The calculation linearises each channel before weighting it, because a screen does not emit light in proportion to the number in the file. 50% grey emits about 21.6% of the light of white, not 50%. That is why mid greys score much worse than they look, and it is why "I can read it fine" is not evidence: the test is modelling people whose vision differs from yours, in worse lighting, on a cheaper screen.
Do icons and form borders need to meet contrast rules?
Yes, at a flat 3:1, under success criterion 1.4.11. It covers anything non-text that carries meaning: the border of a form input, the shape of an icon, a focus ring, the edge of a button. This is the rule most sites fail without knowing about it, because a pale grey input border on white is routinely around 1.5:1, which means a user cannot see where the box is.
Does contrast apply to logos and disabled buttons?
No. WCAG exempts logotypes, because the brand mark is what it is, and it exempts inactive controls, because a disabled button is meant to look unavailable. Do not use either exemption as cover for a low contrast active button, which is the usual way it gets stretched.
What about text over a photograph?
The ratio has to hold against the actual pixels behind the text, which vary across the image, so the honest answer is that it has to pass at the worst point. In practice that means a solid scrim, a gradient, or a text shadow strong enough to guarantee the floor. Checking it against the average colour of the photo will pass a test and fail a reader.
Is passing this enough to be accessible?
No. Contrast is one success criterion out of dozens. It says nothing about keyboard navigation, focus order, form labels, headings, alt text or whether a screen reader can make sense of the page. It is a good thing to fix because it is objective and quick, and it is a floor rather than a finish line.