Color Contrast Checker
Pick a text colour and a background colour. We compute the WCAG contrast ratio and tell you which accessibility levels (AA, AAA) it passes — for normal and large text.
Text colour (foreground)
Background colour
Presets
Live preview
The quick brown fox jumps over the lazy dog
Normal body text at 16px / 1rem renders like this. Notice how comfortable it feels at the contrast pair you've chosen above.
Small print at 14px is what gets people in trouble — it's why WCAG requires a tighter ratio for "normal" sized text.
Contrast ratio
17.85:1
Pass
AA — normal text
requires 4.5:1
Pass
AA — large text
requires 3:1
Pass
AAA — normal text
requires 7:1
Pass
AAA — large text
requires 4.5:1
Contrast is computed using the WCAG 2.1 relative-luminance formula. Everything runs in your browser — no data leaves the page.
FAQ
What standard does this use?▼
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
What's 'large text' for WCAG?▼
Text ≥ 18pt regular weight, or ≥ 14pt bold. The threshold exists because thicker / bigger glyphs are easier to read against low-contrast backgrounds.
Why does the tool suggest darker / lighter versions?▼
If your pair fails AA, we step the foreground darker (against light bg) or lighter (against dark bg) until it hits 4.5:1. It's the smallest change that fixes the failure — handy when you want to keep the brand colour close.
Does this account for alpha / transparency?▼
No — feed it the final opaque colours. For text on a 60%-opaque overlay, blend the overlay with the underlying background yourself first.
More Website Tools
Regex Tester
Test JavaScript regular expressions live. Highlighted matches, capture groups, replace preview. Pure browser.
SPF / DMARC / DKIM Checker
Audit a domain's email authentication records. Spot misconfigurations that send your offer letters and invoices to spam.
Page Speed Audit
Lighthouse-powered scorecard. Performance, Accessibility, Best Practices, SEO, plus Core Web Vitals (LCP, INP, CLS) from real-user data.