Color Contrast Checker + Fixer
WCAG 2.2 AA/AAA + auto-suggest accessible palette
The quick brown fox jumps over the lazy dog
The quick brown fox (large text)
The quick brown fox (bold)
📚 Learn more — how it works, FAQ & guide Click to expand
Learn more — how it works, FAQ & guide
Click to expand
Color contrast checker + fixer
WCAG 2.2 AA/AAA ratio check. Auto-suggest accessible alternatives.
How to use this tool
- 1
Pick foreground + background
Any hex color. Use color picker or paste hex.
- 2
See WCAG score
2.2 AA, AAA for normal + large text.
- 3
Auto-fix if failing
We suggest accessible alternatives preserving brand feel.
Frequently Asked Questions
What are WCAG levels?
AA minimum: 4.5:1 normal text, 3:1 large. AAA enhanced: 7:1 normal, 4.5:1 large. Large text = 18pt+ (24px+) or 14pt+ bold (18.66px+ bold).
Why not just trust your eyes?
Humans vary in color perception. WCAG ratios are objective. Gray on white might look fine on your monitor but fail accessibility for users with low vision, older screens, or bright environments.
Auto-fix respects brand?
Our suggester preserves hue and only adjusts lightness. You keep your brand palette's character while gaining accessibility.
You might also like
🔒
100% Privacy. This tool runs entirely in your browser. Your data is never uploaded to any server.