The WCAG Contrast Ratio: The Formula, the Thresholds, and the Traps

The Web Content Accessibility Guidelines (WCAG) reduce a fuzzy problem — "can people read this text?" — to a single number: a contrast ratio between the text color and its background. It is one of the few areas of design with a hard, objective threshold, which is exactly why it shows up in audits and lawsuits. But the number is easy to get wrong and easy to over-trust. Here is what it actually measures.

Contrast is about perceived lightness, not raw RGB

A naive contrast calculation might just compare average RGB values, but that fails badly: pure green (0,255,0) looks far brighter to a human than pure blue (0,0,255) even though both have a single channel maxed. WCAG instead computes a relative luminance for each color — a single 0-to-1 number approximating how bright it appears — and compares them.

The luminance formula has two steps. First, each sRGB channel is normalized to 0–1 and linearized to undo the gamma the sRGB color space applies:

c = channel / 255
if c <= 0.03928:  linear = c / 12.92
else:             linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

The weights (0.2126, 0.7152, 0.0722) reflect that human vision is most sensitive to green and least to blue. The threshold 0.03928 handles the dark end of the curve where the gamma is effectively linear.

The ratio itself

With two luminances, the contrast ratio is the lighter plus a small constant over the darker plus the same constant:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

The +0.05 accounts for ambient light and screen glare — a perfect black on a real monitor is never truly zero. The result ranges from 1:1 (identical colors, invisible) to 21:1 (black on white). White text on black is 21:1; white on mid-gray (#777) is about 4.5:1, right at the line.

The thresholds: AA and AAA, normal and large

WCAG sets two conformance levels and treats large text more leniently, because bigger glyphs are easier to read even at lower contrast:

• Normal text — AA requires 4.5:1, AAA requires 7:1.
• Large text — AA requires 3:1, AAA requires 4.5:1.
• Large text means 18pt (24px) and up, or 14pt (18.66px) and bold.
• UI components and graphical objects (icons, input borders) need 3:1 against adjacent colors.

The common "4.5:1" everyone quotes is specifically AA for normal body text. If you are designing a big hero headline, 3:1 is compliant at AA — which surprises people who see a checker flag their title.

Where a passing number still fails you

The ratio is necessary but not sufficient. Several real-world traps let text pass the math and still be unreadable:

1. Text over a photo or gradient. The ratio is computed against one flat background. Over an image, part of your text might sit on a bright area and become invisible even if the average passes. Use a scrim, overlay or text-shadow.
2. Thin, light-weight fonts. A 300-weight sans at exactly 4.5:1 is much harder to read than a regular weight. The formula does not know about stroke width.
3. Color-only meaning. Green "success" and red "error" text can both pass contrast against white yet be indistinguishable to color-blind users. Pair color with an icon or label.
4. Anti-aliased edges on small text. Sub-pixel rendering can effectively lower the contrast of 10-12px text below what the nominal colors imply.

A practical workflow

Pick your brand colors, then before shipping, run the actual text/background pairs through a checker and fix the failures by nudging one color toward black or white until it clears 4.5:1. Darkening a light gray to #767676 is the classic fix for body text on white — it lands at 4.54:1, just over the line. Do the same for your placeholder text, your disabled states, and your footer, which are the places contrast most often slips.

Our contrast checker computes the ratio live, shows the AA and AAA pass/fail badges for both normal and large text, and lets you copy either color so you can iterate. It runs entirely in your browser, so you can audit a client's palette without pasting anything into a third-party service.