Color Contrast Checker — WCAG AA / AAA Ratio

The ratio and the four thresholds

Contrast runs from 1:1 for identical colours to 21:1 for black on white. Those are the absolute limits; nothing can be outside them.

• AA, normal text — 4.5:1
• AA, large text — 3:1
• AAA, normal text — 7:1
• AAA, large text — 4.5:1

Two things are varying there, and it is worth separating them. AA against AAA is how strict the level is — 4.5 versus 7 for the same text. Normal against large relaxes the requirement within a level, because a bigger glyph stays legible at lower contrast; that is why AA large text asks for 3 rather than 4.5, and it is a concession about size, not about rigour.

Contrast is luminance, not colour difference

This is the misunderstanding behind almost every surprising result. Contrast measures relative luminance, using fixed WCAG coefficients: 0.2126 for red, 0.7152 for green, 0.0722 for blue.

Look at how unequal those are. Green carries over seven times the weight of blue.

Yellow on white proves the point. Yellow is red plus green at full strength, and green is doing most of the luminance work, so saturated yellow is nearly as bright as white itself: 1.07:1. It is unmistakably a different colour and effectively invisible as text. The same weighting running the other way explains why a saturated blue reads far darker than its vividness suggests.

Once the coefficients are in mind, contrast results stop being mysterious and become predictable.

The practical grey scale

Grey removes hue from the question, so the thresholds show plainly. On white:

• #949494 — 3.03:1, clears large text only
• #767676 — 4.54:1, just passes AA for body text
• #595959 — exactly 7.00:1, reaches AAA

The lesson is uncomfortable for a lot of design work: light grey on white is almost always a failure. Body text needs to be darker than most people expect, and anything lighter than that middle value is below the AA line unless the type is large.

What the ratio does not measure

• Reading comfort. Maximum contrast is not maximum comfort — pure black on pure white at full brightness is fatiguing for long reading, and the ratio has nothing to say about that.
• Colour blindness. Two colours can have excellent contrast and still be indistinguishable to someone who cannot separate red from green. Which is the real rule underneath: never let colour alone carry information.
• Text over an image or gradient. The background differs per pixel, so a single ratio is meaningless.

For that last case the practical method is to sample the lightest and darkest points the text actually crosses rather than an average. If it fails at either extreme it fails in production, and averaging hides exactly the spot where it breaks.

Why it matters beyond compliance

Low contrast fails first on a phone in daylight, on a cheap screen, and for eyes that no longer focus as they did. That is a large share of any real audience rather than an edge case — which is why contrast is better treated as a usability property than a box to tick.

Everything runs in your browser. To build a set of colours that passes by construction rather than by testing afterwards, see the colour palette generator.