Light gray text on a white background looks "clean" in a mockup and unreadable everywhere else — in sunlight, on cheap displays, for aging eyes. Contrast ratios turn that subjective complaint into an objective number, and WCAG turns the number into a pass/fail line. Here's how both work.

How the ratio is computed

The WCAG contrast ratio compares the relative luminance of two colors — roughly, how much light each reflects, adjusted for how human vision weights green over red and red over blue. The formula yields a ratio from 1:1 (identical colors) to 21:1 (black on white).

The bigger question behind this post: How to Remain Valuable When Intelligence Becomes Cheap — which human, economic, and strategic advantages stay scarce when AI does the work. A 224-page practical book, $3.84. Read it on Gumroad →

Two things surprise people. First, it's purely about luminance, not hue: saturated blue on black can fail while "boring" dark gray passes. Second, the scale is unforgiving in the middle — the difference between passing and failing is often a shade adjustment you'd barely notice in a palette.

What the thresholds mean

  • 4.5:1 — the WCAG AA bar for normal text. This is the number to memorize: body copy, labels, and links should all clear it.
  • 3:1 — the AA bar for large text (18pt+, or 14pt+ bold) and UI components like form borders and focus indicators.
  • 7:1 — the AAA bar for normal text. Aspirational for body copy; worth hitting for critical content.

These aren't arbitrary aesthetics — they map to readability research for low-vision users, and in many jurisdictions they're effectively law for public-sector and commercial sites alike.

Common failures

Placeholder text styled lighter than input text fails constantly. So does secondary "helper" copy in trendy light grays, text over photography without an overlay, and disabled-state buttons that convey information by color alone. Dark mode inverts the traps rather than removing them — dark gray on black fails just as happily.

Check every pairing

Never eyeball contrast — run the numbers. The color contrast checker computes the ratio for any foreground/background pair and tells you exactly which WCAG levels pass. Check your body text, your links, your muted captions, and your button states. It takes two minutes and fixes the most common accessibility defect on the web.