WCAG Contrast Checker

How the Contrast Checker works

WCAG contrast checker: AA and AAA thresholds

Contrast is the accessibility requirement that gets checked most and understood least. The number everyone quotes — 4.5:1 — is one threshold from one formula, and the formula has known problems that the people who wrote it have spent years replacing.

How the WCAG ratio is calculated. Each colour is converted to a relative luminance between 0 and 1, using a piecewise curve that linearises the sRGB gamma, then weighting red, green and blue by 0.2126, 0.7152 and 0.0722 because the eye is far more sensitive to green than to blue. The ratio is (lighter + 0.05) / (darker + 0.05), which runs from 1:1 for two identical colours to 21:1 for pure black on pure white. The 0.05 term is a fudge for ambient screen glare, and it is where most of the formula's inaccuracy lives.

The thresholds depend on the size of the text. AA wants 4.5:1 for body text and 3:1 for large text, where large means 24px, or 18.66px if it is bold. AAA raises those to 7:1 and 4.5:1. A separate 3:1 rule covers non-text things that carry meaning: input borders, focus rings, icons, chart series. Meeting AA on your body copy while your form fields have a barely visible outline is one of the most common audit findings there is.

Why APCA exists. The WCAG formula treats a pair of colours symmetrically, so dark-on-light and light-on-dark score identically. Human vision does not work that way — light text on a dark background needs more separation to read as comfortably, an effect that gets stronger as text gets thinner. The WCAG formula also badly overrates contrast in the dark end of the range, which is why mid-grey on black can pass 4.5:1 and still be genuinely hard to read. APCA models perceived lightness contrast instead, is polarity-aware, and returns an Lc value from roughly -108 to 106.

Reading an Lc number. Around Lc 90 is safe for any text including thin weights, Lc 75 is a reasonable floor for 16px body copy, Lc 60 suits larger or bolder body text, Lc 45 is headline territory and Lc 30 is the floor for borders and icons. The sign tells you the polarity: negative means light text on a dark background. APCA is not yet normative anywhere, so treat it as the better guide to how the text will actually read while continuing to ship the WCAG ratio your audit asks for.

Contrast is necessary, not sufficient. A page can pass every ratio and still be unreadable because the line length is too long, the font is too light, the letter spacing is too tight, or the text sits over a photograph whose brightness varies. Contrast checkers measure two flat colours; real interfaces have gradients, translucency and images behind their text, and each of those needs checking at its worst point rather than its average.

Contrast of greys on white

Grey body text on #ffffff.

WCAG contrast ratio and AA and AAA result for grey text on white

Contrast ratio formula and worked examples

The formula: contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker one. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B after each sRGB channel is linearised, so the ratio runs from 1:1 for identical colours to 21:1 for black on white.

First example. #767676 text on white has a ratio of 4.54:1, which is the lightest neutral grey that passes AA for normal text (4.5:1). One step lighter, #777777, gives 4.48:1 and fails.

Second example. white text on #0066cc blue gives 5.57:1, which passes AA for normal text but not AAA at 7:1. Darkening the blue to #004c99 lifts it to 8.42:1 and passes AAA.

How many to one do you need? AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for user-interface components. AAA needs 7:1 for normal text and 4.5:1 for large text.

Related tools