Color Contrast Ratio Checker (WCAG)
Design utilities: colors, gradients, CSS, and SVG tools.
What does this tool do?
Check if your text colors meet WCAG accessibility standards. Pick foreground and background colors to get the exact contrast ratio with instant AA and AAA pass/fail badges for normal and large text.
Key features
- Live preview
- Copy CSS instantly
- Export options
- Professional output
Check if your text colors meet WCAG accessibility standards. Pick foreground and background colors to get the exact contrast ratio with instant AA and AAA pass/fail badges for normal and large text.
How to Use
- Pick a foreground (text) color and a background color using the color pickers.
- See the live preview and exact contrast ratio update instantly.
- Check the AA and AAA badges to know if your combination passes WCAG.
Core Features
- 100% client-side WCAG 2.1 contrast math - nothing leaves your browser
- Live text preview on your chosen background
- AA and AAA badges for both normal and large text
- Zero signup, zero tracking, instant results
Frequently Asked Questions
What is a good contrast ratio?
For normal body text, aim for at least 4.5:1 (WCAG AA). For large headings (24px+), 3:1 is enough for AA. AAA requires 7:1 for normal text.
Is this checker free?
Yes, completely free with no signup. All calculations run locally in your browser.
How to Use Color Contrast Ratio Checker (WCAG)
Reviews & Comments
No reviews yet. Be the first to share your experience!
Your feedback helps others discover great tools.