👤 Your account

🎨 Contrast checker

Pick a text color and a background color. You get the exact WCAG 2.1 contrast ratio and pass/fail badges for AA and AAA, at normal and large text sizes.

Text (foreground)

Background

—

contrast ratio

Live preview

Large heading text (24px)

Normal body text at 15px — the quick brown fox jumps over the lazy dog. If this is hard to read, your visitors will simply leave.

Small print at 12px — the strictest test of all.

🔧 Fix it & palettes

Failing? These buttons nudge your text color toward black or white — whichever reaches the target with the smallest change:

Pick colors above, then fix.

Known-good palettes — click to load

Keeping this pair? Name it and save it to your collection:

📖 WCAG contrast, without the jargon

The ratioCompares the brightness of text and background. 1:1 = invisible (same color), 21:1 = black on white, the maximum possible.

AA — the legal baseline4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold). Most accessibility laws and audits are judged at AA.

AAA — the gold standard7:1 for normal text, 4.5:1 for large. Harder to reach with brand colors, worth it for body text people read for minutes.

Color is never the only signalContrast gets text read; it doesn't replace labels. A red error with no message fails everyone — including the 1 in 12 men with color blindness.

🎨 My Color Pairs & Palettes

The pairs your projects actually ship with — saved with their verdicts so future-you never re-tests the same color twice. Records are saved under your local account (or guest space) on this device — create, view, edit and delete them any time.

Color Contrast Checker