Contrast Checker.
Measure the contrast ratio between a text color and its background, then check it against the WCAG 2.1 thresholds. Pick two colors and the ratio, preview, and AA/AAA pass-fail update live. Everything runs in your tab — no upload, no account.
How contrast is measured.
It's a ratio, not a difference. WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Luminance isn't the raw RGB value — each channel is divided by 255, gamma-decoded (the ((c+0.055)/1.055)^2.4 step), then weighted 0.2126·R + 0.7152·G + 0.0722·B because the eye is far more sensitive to green than to blue. The result runs from 1:1 (identical colors) to 21:1 (pure black on pure white).
The thresholds. For normal-size body text you need 4.5:1 for AA and 7:1 for AAA. “Large” text — 24px, or 18.66px (14pt) bold — only needs 3:1 for AA and 4.5:1 for AAA, because bigger strokes are easier to read at lower contrast. Interface components and meaningful graphics (icons, input borders, focus rings) need 3:1 under WCAG 1.4.11.
What it can't tell you. The ratio is about luminance only, so two colors can pass and still be uncomfortable — pure complementary hues at equal lightness, for instance. And it says nothing about whether color is your only signal: never rely on color alone to convey state. Use this as a fast floor, not the finish line.