WCAG Contrast Ratios, Explained

Contrast ratio is a measure of how different two colors are in luminance — perceived brightness — expressed as a ratio from 1:1 (identical) to 21:1 (pure black on pure white). It’s the number behind the WCAG (Web Content Accessibility Guidelines) rules that decide whether text is legible enough, and it’s a far better judge than your own well-adjusted monitor in a dim room.

How the ratio works

The formula compares the relative luminance of the lighter color (L1) and the darker color (L2):

contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05)

Relative luminance weights the red, green, and blue channels by how bright they appear to the human eye — green counts far more than blue. You don’t need to compute it by hand; every serious color tool does it for you. What matters is reading the result correctly.

The thresholds that matter

WCAG defines two conformance levels for text:

• AA (the common target) — 4.5:1 for normal text, 3:1 for large text.
• AAA (the strict target) — 7:1 for normal text, 4.5:1 for large text.

Large text means at least 18 points (about 24 CSS pixels) at regular weight, or at least 14 points (about 18.5 CSS pixels) at bold weight.

Since WCAG 2.1 there’s also a 3:1 minimum for non-text elements — icons, form-control borders, focus indicators, and the parts of a chart you need to tell apart.

Practical ways to pass

• Fix the lighter color first. Muted “aesthetic” grays on white are the most common failure; darkening text is usually less disruptive than changing a background.
• Check both themes. A pair that passes in light mode can fail in dark mode — the same hues land on different luminance once the background flips.
• Don’t trust hue difference. Red on green can be high-contrast in hue and terrible in luminance. The ratio only sees brightness — and so, roughly, does anyone with color-vision deficiency.
• Test at the size you’ll ship. A color that passes as a headline can fail as caption text, because the threshold changes with text size.

Checking a whole palette pair-by-pair is tedious by hand, which is why Palette Library builds WCAG contrast checks into the palette itself — you see which combinations pass while you’re still choosing colors, not after the design ships.