Color Contrast Checker

WCAG AA and AAA checks in one glance.

Foreground (text)

Background

Contrast ratio

—

: 1 ratio

Normal · AA

—

Normal · AAA

—

Large · AA

—

Large · AAA

—

Live preview

Large heading

Large bold body

Normal body text — the quick brown fox jumps over the lazy dog.

Small caption line at 13px for when that's the only space you have.

FAQ

What do AA and AAA mean?

WCAG conformance levels. AA is the legal minimum in most countries (4.5:1 ratio for normal text, 3:1 for large). AAA is the gold standard (7:1 normal, 4.5:1 large) — recommended for anything read for extended periods.

What counts as "large" text?

18pt (about 24px) regular, or 14pt (about 18.5px) bold and heavier. Anything below that must meet the normal-text threshold.

My contrast looks fine — why does it fail?

Your screen and your reader's screen aren't identical. Older phones, glare, low-vision users — all factors WCAG accounts for. A ratio that fails on paper fails for millions of real users.

What about UI elements and icons?

Non-text UI (buttons, form borders, icons) needs 3:1 minimum against adjacent colors — that's WCAG 2.1 AA's "Non-text Contrast" rule. Same tool works for that.

Ready to publish?

Share your writing on WriteUpCafe

Free account. Thousands of daily readers. Built-in SEO. Nothing to install.

Create your free account