WCAG Contrast Ratio Explained: What 4.5:1, 3:1 and 7:1 Really Mean

Every accessibility audit comes down to one number: the contrast ratio between your text and its background. This guide explains what that number is, how it is calculated, what the WCAG thresholds actually require — and shows worked examples with real numbers, so you never have to guess again.

The ratio, in one formula

A contrast ratio compares the relative luminance of two colors — roughly, how much light each one reflects. The lighter color goes on top:

Luminance is not brightness as your eye perceives a slider: each sRGB channel is first converted to linear light, then weighted — green counts most (0.7152), then red (0.2126), then blue (0.0722). That weighting is why a vivid blue can be darker, in ratio terms, than a muted green that looks similar. The result runs from 1:1 (identical colors) to 21:1 (black on white, the maximum).

The thresholds you actually need

"Large text" means at least 18pt (about 24px), or 14pt (about 18.66px) bold. Everything smaller is normal text. Note the trap: AAA for large text (4.5:1) is exactly AA for normal text — the same pair can be AAA at headline size and merely AA in body copy.

Worked example: the gray that barely passes

Medium gray #767676 on white has a relative luminance of 0.1812. Plug it in:

That passes AA for normal text — by 0.04. One shade lighter and it fails. This is why placeholder text and secondary labels, usually set in exactly this gray range, are the most common audit failure on otherwise clean sites:

The fix ladder is simple: darken the text one step at a time until the ratio clears your target with margin — do not ship a 4.54:1 pair and hope nobody re-measures it. A comfortable target is 7:1 for body text if you can get there without wrecking the design.

Common pairs, scored honestly

All ratios below are computed with the WCAG 2.1 formula, not estimated:

Two lessons hide in that table. First, saturated brand colors are not automatically safe: bright red #E53935 on white fails AA for body text despite looking bold and clear. Second, hue difference is not contrast: pure red on pure yellow screams visually, yet scores only 3.72:1 because their luminances are close. If you judge contrast by eye, you will ship failures.

See it, don't just read it

Quick checklist before you ship

• Score every text color against its actual background — including disabled states, placeholders, and captions.
• Target AA (4.5:1) as the floor and AAA (7:1) for body text where the design allows it.
• Never judge by eye: check red-on-yellow style hue pairs, which deceive the eye most.
• Re-check after any color tweak — one hex digit can move a borderline pair across the line.
• Run the result through the color blindness simulator — a pair can pass the ratio and still be indistinguishable for some users if it relies on hue alone.
• Building a palette? Check every swatch against white and black in the palette generator.