Nifty

Color Contrast Checker (WCAG)

Check color contrast against WCAG AA and AAA for accessible text — live ratio, pass/fail badges and a preview, in your browser.

The quick brown fox jumps over the lazy dog.
Large heading sample
14.68:1
contrast ratio
AA — normal text ✓ PassAAA — normal text ✓ PassAA — large text ✓ PassAAA — large text ✓ Pass

🔒 Checked in your browser. Large text = 18pt+ (or 14pt+ bold). Thresholds: AA 4.5 / AAA 7 (normal), AA 3 / AAA 4.5 (large).

Check colour contrast for accessibility

Pick a text colour and a background colour to see the exact WCAG contrast ratio, whether it passes AA and AAA for normal and large text, and a live preview. Everything is computed in your browser using the official WCAG 2.1 relative-luminance formula.

What the levels mean

WCAG requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18pt+, or 14pt+ bold) needs 3:1 (AA) or 4.5:1 (AAA).

Frequently asked questions

What counts as large text?

Text that is at least 18pt (about 24px), or 14pt (about 18.66px) if bold.

Which formula is used?

The WCAG 2.1 relative-luminance formula, the same one used by browser dev tools and accessibility auditors.

Does it handle transparency?

Yes. If the text colour carries alpha — 8-digit hex like #1f2937cc, rgba() or hsla() — it is composited over the background first, so the ratio reflects the flattened colour you actually see. The background is treated as opaque.