Contrast checker
Two colours in, the WCAG contrast ratio out — and the arithmetic that produced it, which is the part every other checker hides. Nothing you choose here leaves your browser — it is worked out on your own device, so there is nothing to send and nothing to log.
Why the sum is not the obvious one
The numbers in a hex code are not brightness. They are gamma-encoded: channel 128 is not half as bright as 255, it is about a fifth. Every contrast figure worth having undoes that first, and that is the step no other checker shows you.
Then the three channels are weighted, and not equally. Green carries about seventy per cent of what the eye reads as brightness and blue about seven. That is not a convention, it is how the eye is built — and it is why yellow text on white is unreadable at 1.07:1 while blue text on white is perfectly fine, even though both look “bright” by any naive measure.
| Red | 0.2126 |
|---|---|
| Green | 0.7152 |
| Blue | 0.0722 |
What the numbers have to beat
These are WCAG 2.2's, and they are what an accessibility audit will measure you against.
| 4.5:1 | AA for ordinary text. The one that matters most |
|---|---|
| 3:1 | AA for large text — 18.66px bold or 24px plain — and for icons, form borders and focus rings |
| 7:1 | AAA for ordinary text |
| 4.5:1 | AAA for large text, which is why that number appears twice |
Large text gets an easier bar because a thicker stroke covers more pixels, so less contrast is needed to make out the shape. The sizes are specific: 18.66px only counts if it is bold.
The 0.05 in the sum
The ratio is (lighter + 0.05) ÷ (darker +
0.05), and the 0.05 stands for the light a real screen reflects
back at you in a real room. It is why the maximum possible contrast is
21:1 rather than infinity: black on white would divide by zero without
it, and in practice black on a screen is never quite black.
What it will not tell you
- Whether the text is readable. Contrast is one part of that; the typeface, the size, the line length and the spacing are the rest, and none of them is a number.
- Anything about colour blindness. Two colours can have plenty of contrast and still be indistinguishable to somebody who cannot separate red from green — which is why a rule that relies on colour alone fails whatever this says.
- What a printed page will look like. This is screen light, not ink on paper.