Color Contrast Checker
Check if your colors meet WCAG accessibility standards
Color Contrast Checker
Check WCAG AA/AAA accessibility for your colors
The quick brown fox
jumps over the lazy dog. 0123456789
Check if this text is readable on the background.
How to Use
- 1 Enter foreground (text) color – HEX or use color picker
- 2 Enter background color – HEX or use color picker
- 3 See instant contrast ratio and WCAG compliance
- 4 Swap colors or copy results to clipboard
What You Get
WCAG 2.1 color contrast checker with real-time ratio calculation, AA/AAA compliance testing for normal and large text, live preview, and accessibility scoring.
Input: #FFFFFF on #1A1A2E
Output: 12.58:1 – All WCAG levels pass ✅
Input: #777777 on #FFFFFF
Output: 4.48:1 – AA Large only ⚠️
Input: #CCCCCC on #FFFFFF
Output: 1.60:1 – All levels fail ❌
What is a good contrast ratio for text?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text. Higher ratios are always better for readability.
What is WCAG AA vs AAA contrast?
AA is the minimum accessibility standard (4.5:1 contrast). AAA is the enhanced standard (7:1 contrast). Most websites aim for AA. AAA is recommended for government and healthcare sites.
How do I check if my colors are accessible?
Enter your text color and background color in the checker. It instantly shows the contrast ratio and whether it passes WCAG AA/AAA for both normal and large text.
What counts as large text in WCAG?
Large text is 18pt (24px) or larger, OR 14pt (18.67px) bold or larger. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA).
How to fix low contrast colors?
Make the text darker or the background lighter (or vice versa). Increase the difference between light and dark values to improve contrast.
Is color contrast required by law?
Yes, in many countries. The European Accessibility Act (2025) requires WCAG AA compliance for EU websites. ADA in the US also references WCAG standards.
Can I check contrast for colored text on colored background?
Yes! Enter any two colors. The checker works for any color combination – not just black/white text.
Is my data stored?
No. All calculations happen in your browser. Colors never leave your device.
100% client-side. Your colors never leave your device.