A contrast ratio compares the relative luminance of two colours. Black on white is 21:1, a colour against itself is 1:1, and everything real sits between them — which makes it one of the few design decisions with a number attached.
The number is not a measure of how different two colours look. It measures how much light they emit relative to each other, and that distinction explains both the thresholds and their known weaknesses.
How is the ratio calculated?
By taking the relative luminance of each colour, adding a small constant to both, and dividing the lighter by the darker. The constant models the light a real screen reflects from the room around it, which is why a perfectly black pixel does not produce an infinite ratio.
Relative luminance itself is a weighted sum of the three channels after they have been linearised, and the weights are wildly uneven: green carries about 0.72, red about 0.21, and blue about 0.07.
That is the eye rather than the screen. Human vision is most sensitive in the green part of the spectrum and least in the blue, so changing the blue channel of a colour barely moves its measured luminance while changing the green moves it a lot.
Which threshold applies where?
Four numbers cover almost every case.
| Content | Minimum ratio |
|---|---|
| Body text, AA | 4.5:1 |
| Large text, AA | 3:1 |
| Body text, AAA | 7:1 |
| Large text, AAA | 4.5:1 |
| Interface parts and icons | 3:1 |
Large text means around 24px, or about 18.7px when bold. The allowance exists because a thicker stroke covers more pixels, so the same ratio delivers more contrast in practice.
The last row is the one most often missed. Borders, focus rings, form field outlines and the meaningful parts of an icon all need 3:1, which rules out the very pale grey borders that were fashionable for years.
Anti-aliasing quietly lowers the real contrast of text. The edge pixels of a letter are a blend of the text colour and the background, so a glyph measured at exactly its threshold delivers less than that along every curve — one more reason to clear a threshold rather than land on it.
Where does the formula fall short?
At the dark end, mostly. The calculation is not perceptually uniform, so a pair of dark colours can pass comfortably while looking flat, and some light pairs fail while reading perfectly well.
Font weight is the other gap. The thresholds account for size and boldness only through one coarse cutoff, so a thin weight at a passing ratio can be harder to read than a heavier weight at a failing one.
Both are known problems, and work on a replacement built around perceived lightness has been running for years. Until something replaces it, the current numbers remain the ones that get tested against — so the practical stance is to meet them and then look at the result.
What does Delta E measure instead?
Perceived difference between two colours, which is the question contrast ratio does not answer. It is computed in a colour space built so that equal numerical distances look like equal steps.
The rule of thumb is that a difference of about one is the threshold of visibility for most people under good conditions, and anything under that is effectively the same colour. Around two to three is a difference you would notice side by side but not across a page.
That makes it the right measure for a different set of questions: whether two greys in a palette are actually distinct, whether a compressed image has shifted, or whether a printed sample matches the screen. Two colours can have a large perceptual difference and a poor contrast ratio at the same time — a saturated red and a saturated green being the classic example.
What about colour blindness?
Contrast ratio handles it better than it appears to, because luminance survives most forms of colour vision deficiency. A pair that passes on ratio generally remains distinguishable.
What fails is meaning carried by hue alone. Red for error and green for success at similar lightness is the standard failure, and the fix is never a different red — it is adding a second signal, whether an icon, a label or a difference in weight.
That is also the general principle behind the interface threshold: anything that communicates by being visible needs to be visible, and colour is one channel rather than the only one.
Questions people ask
Does a large heading still need 4.5:1? Not if it clears the size threshold, though a headline is usually the easiest place to exceed it anyway.
Does the ratio depend on which colour is text? No. The formula divides lighter by darker regardless of role, so swapping them gives the same number.
Do I need to check every combination? Only the ones that occur. A palette of ten colours has forty-five pairs and most are never placed together.
Does opacity change the result? Yes, and it must be measured against the actual backdrop, since a semi-transparent colour has no luminance of its own.
Is AAA worth targeting? For body text in a reading-heavy product, often. As a blanket rule it constrains the palette severely.
Measure before you commit. The colour contrast checker gives the ratio and the thresholds it clears, the accessible colour palette generator builds a set that passes from the start, and the colour difference calculator answers the other question — whether two colours are far enough apart to be told apart at all.