ColorContrast
📏 Engineering Calculator

WCAG Contrast Checker

Enter text and background colors to get the ratio and every WCAG verdict.

How the contrast checker works

The formula

Contrast = (L1 + 0.05) ÷ (L2 + 0.05), where L is relative luminance: sRGB channels linearized, then perceptually weighted (0.2126 R + 0.7152 G + 0.0722 B — the green bias matches human vision). The ratio runs 1:1 (identical colors) to 21:1 (black on white).

The verdicts

  • 4.5:1 — WCAG AA for normal text (the legal standard most sites target).
  • 3:1 — AA for large text (18pt+/24px, or 14pt bold) and UI components (buttons, borders, icons).
  • 7:1 — AAA for normal text; the enhanced standard.

Fixing failures

  1. Move luminance, not hue. Gray-blue on gray-blue fails at any hue; darken one side until the ratio crosses 4.5.
  2. Watch the green channel: luminance is 71% green — greens and reds with the same lightness fail against each other constantly (and vanish for color-blind users).
  3. Check states: buttons have hover, disabled, and focus variants — each pairing needs its own pass.