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 has separate text-contrast criteria at levels AA and AAA:

• 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.67 CSS pixels) at bold weight. Compare the unrounded ratio with the threshold: 4.499:1 does not pass a 4.5:1 requirement.

These requirements concern text and images of text. Exceptions include logos, incidental text, and text in inactive controls. See the exact AA contrast criterion and AAA contrast criterion.

The separate non-text contrast criterion requires 3:1 against adjacent colors for visual information needed to identify controls, their states, and meaningful graphical objects. It does not apply to every decorative icon or border; inactive controls and some unmodified browser controls are exceptions. Check the actual component, state, and background, not just isolated palette swatches.

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. Two colors can look different yet have insufficient luminance contrast. Contrast and color-vision deficiency need separate checks; a contrast ratio does not simulate another person’s color vision.
• 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.

Palette Library includes WCAG contrast checks and color-blindness previews. Use them while choosing colors, then test the actual foreground/background pairs, text sizes, and states in the finished interface. A palette check alone does not establish WCAG conformance for a page or app.