WCAG Contrast Checker
Check the contrast ratio between foreground and background colors against WCAG 2.1 accessibility standards. Pass / fail for AA normal, AA large, AA UI, AAA normal, AAA large. Live preview at 4 text sizes.
Large headline text (36px)
Medium body text (18px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text (14px) — most common body size on the web. Quick brown fox jumps over the lazy dog.
Fine print (12px) — used for legal copy, captions, footnotes.
What powers the WCAG Contrast Checker
WCAG 2.1 contrast ratio calculation (using relative luminance)
5 thresholds checked: AA normal (4.5:1), AA large (3:1), AA UI (3:1), AAA normal (7:1), AAA large (4.5:1)
Color-coded verdict (AAA / AA / AA Large / Fail)
Live preview at 4 text sizes (36 / 18 / 14 / 12 pt)
Swap foreground and background
Instant
Why the WCAG Contrast Checker is different
Browser-native
The WCAG Contrast Checker runs entirely in your browser. Input is processed locally — never uploaded, never logged, never cached anywhere outside your device.
No artificial limits
No daily quotas, no character ceilings, no "upgrade for more" walls. Every feature is the complete feature — the same on the first use as the thousandth.
Production-grade quality
Built to the same engineering bar as paid SaaS tools — accurate algorithms, audited logic, responsive design and accessibility-tested interactions.
Common use contexts
- Validating button / link colors meet WCAG before shipping a design
- Auditing client deliverables for accessibility
- Picking accessible color combinations for dashboards / forms
- Pre-launch checklist for compliance-sensitive sites (gov, edu, finance)
Private and secure
Zero upload
All processing happens in your browser. Input is never transmitted, logged or cached.
Works offline
Once the page loads, the tool runs without an internet connection. No network calls happen during use.
No tracking
No accounts, no cookies for tool state. Only aggregate analytics count visits at the page level.