A contrast ratio measures how different two colours are in lightness — not hue, not saturation, only how light or dark. It runs from 1:1, meaning identical, to 21:1, which is pure black on pure white and the most any two colours can reach.
That “lightness only” part is the key to understanding every surprising result you will get.
Why two vivid colours can fail
Red text on a green background is unreadable to test, yet the two colours could not look more different. The ratio comes back around 1.4:1 — almost failing completely.
The reason is that contrast algorithms model how the eye actually separates text from its background, and that job is done overwhelmingly by lightness. A saturated red and a saturated green can sit at nearly the same lightness, so to the part of your vision that reads edges, they are almost the same colour. The hue difference is real but does not help legibility.
This is also why the check matters even when a pairing “obviously looks fine”. Your eye is telling you the colours differ; it is not telling you whether text will be legible.
Where the thresholds come from
WCAG sets four numbers:
| Level | Text | Ratio |
|---|---|---|
| AA | Large (24px, or 19px bold) | 3:1 |
| AA | Body | 4.5:1 |
| AAA | Large | 4.5:1 |
| AAA | Body | 7:1 |
Large text gets an easier target because bigger, thicker letterforms stay legible at lower contrast — there is simply more coloured area for the eye to work with. The same logic is why thin fonts feel harder to read than the ratio alone predicts: the metric assumes ordinary weight.
AA is the level most laws and contracts reference. AAA is a stricter target that is not always achievable for every element, and WCAG itself does not expect whole sites to hit it.
The check almost everyone skips
Text gets checked. Everything else gets forgotten.
WCAG requires 3:1 for meaningful non-text elements — the border of a text input, an icon that carries information, the focus ring around the element you have tabbed to. A form where the only sign of a field is a pale grey outline at 1.4:1 is inaccessible even if every label passes.
Focus indicators are the most common failure. If a keyboard user cannot see which element is focused, the interface is unusable to them regardless of how good the text contrast is.
The trap with brand colours
Mid-tone colours are where this bites hardest. Take this site’s own accent, a medium blue at
#3d8bf5. Against white it scores about 3.4:1 — fine for a large heading, not enough for body
text, and not enough for a small label on a white button.
That is not a flaw in the colour; it is a limit on where it can be used. The honest move is to reserve mid-tone brand colours for large text and fills, and reach for a near-black or near-white when the text is small. A colour picker that told you the blue was “accessible” without qualification would be lying to you.
Doing it in practice
Check the real pairing, at the real size, including the states people forget — hover, focus, disabled, and text sitting on top of an image. Then check your icons and borders, not just your paragraphs. Most accessibility failures are not close calls on body text; they are the elements nobody thought to measure.