Color Contrast Checker – WCAG 2.1 AA & AAA Accessibility Tester
Check the contrast ratio between foreground and background colors. Verify WCAG 2.1 AA and AAA accessibility compliance. Essential for inclusive web design.
The quick brown fox jumps over the lazy dog — Normal text (16px)
The quick brown fox — Large text (24px bold)
What Is the Color Contrast Checker?
The Color Contrast Checker is a free WCAG accessibility tool that calculates the luminance contrast ratio between a foreground color (your text) and a background color. It evaluates your color pair against WCAG 2.1 Level AA and Level AAA guidelines for both normal text and large text, showing pass or fail badges in real time. This tool is essential for making websites, apps, and digital content accessible to users with visual impairments, including the approximately 300 million people globally who have some form of color blindness.
How to Use the Tool
Set Foreground Color
Enter your text color as a HEX code or click the color swatch to pick it visually. This is the color of the text (or UI element) that appears on top.
Set Background Color
Enter your background color. Both native pickers and HEX inputs are supported. Use the swap button to quickly reverse foreground and background.
Read the Contrast Ratio
The tool calculates and displays the exact contrast ratio (e.g., 4.7:1) along with color-coded WCAG pass/fail badges for AA Normal, AA Large, AAA Normal, and AAA Large text.
Why This Tool Is Useful
The Web Content Accessibility Guidelines (WCAG) are an international standard published by the W3C. Level AA is the globally accepted minimum for commercial websites. Level AAA is the gold standard. Many countries including the USA, UK, EU members, Canada, and Australia legally require digital accessibility compliance. Beyond legal risk, poor contrast causes real user harm — an estimated 1 in 12 men and 1 in 200 women have some form of color blindness. Contrast checking is one of the fastest, highest-impact steps you can take toward a more inclusive product.
Checks both conformance levels so you know exactly how accessible your color choices are.
Applies the correct thresholds for each: 4.5:1 for normal text (AA) and 3:1 for large text (AA).
See your actual text rendered on your chosen background so you experience it as users would.
One-click swap lets you check the reverse contrast without re-entering values.
Open, check, and close — completely free and instant.
Helps you build products usable by people with low vision, color blindness, or who view screens in bright sunlight.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) contrast ratio is a measurement of the relative luminance difference between two colors. It ranges from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast). Higher ratios mean better readability.
For normal body text (under 18pt / 14pt bold), you need at least 4.5:1. For large text (18pt+ / 14pt+ bold), the minimum is 3:1. These are WCAG 2.1 Level AA requirements.
WCAG Level AAA is the highest accessibility standard. It requires a 7:1 ratio for normal text and 4.5:1 for large text. While not always legally required, it ensures readability in the widest possible range of conditions.
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. These thresholds apply to WCAG 2.1.
Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 minimum ratio for UI components like buttons, inputs, and focus indicators. This tool helps you check text contrast; use it as a guide for non-text elements too.
Our eyes adapt to context. Colors that look acceptable against a colored background may not meet mathematical luminance thresholds. The checker removes this perceptual bias and gives you an objective, standardized ratio.
Yes, completely free with no account required. You can check as many color combinations as you like.