Contrast Checker
Check color contrast ratios for WCAG accessibility compliance. Test foreground and background colors with AA/AAA indicators for normal and large text. Visual preview and suggestions to improve failing contrasts.
Contrast Ratio
21.00:1
WCAG Compliance
AA Normal
✓Required: 4.50:1
Text under 18pt (24px)
AA Large
✓Required: 3.00:1
Text 18pt+ or 14pt+ bold
AAA Normal
✓Required: 7.00:1
Enhanced - Text under 18pt
AAA Large
✓Required: 4.50:1
Enhanced - Text 18pt+ or 14pt+ bold
Visual Preview
Normal text (16px) - AA requires 4.5:1
Large text (24px) - AA requires 3:1
Bold text (16px)
Small text (14px) - Harder to read
Privacy: All contrast calculations happen in your browser. No data is sent to any server.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Enter foreground color (text) using the color picker or by typing a HEX code in the input field.
- 2 Enter background color using the color picker or by typing a HEX code in the input field.
- 3 View the contrast ratio displayed prominently in the center of the page.
- 4 Check WCAG compliance with the 4 indicators showing pass (✓) or fail (✗) for each standard.
- 5 Preview the colors in the visual section with different text sizes to see how they look in practice.
- 6 Use suggestions if contrast fails — click Apply on any suggestion to try the recommended color adjustment.
💡 Tip: WCAG AA is the legal requirement in most jurisdictions (4.5:1 for normal text, 3:1 for large text). AAA is enhanced accessibility (7:1 for normal text). Use the swap button to test reversed color combinations quickly.
Frequently Asked Questions
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) are international standards for making web content accessible to people with disabilities. Contrast ratio measures the difference in brightness between foreground (text) and background colors. Sufficient contrast is essential for people with low vision, color blindness, or viewing screens in bright sunlight. WCAG AA compliance (4.5:1 for normal text) is a legal requirement under laws like the ADA (Americans with Disabilities Act) and EAA (European Accessibility Act).
What's the difference between AA and AAA compliance?
WCAG AA (minimum legal standard): Requires 4.5:1 contrast for normal text and 3:1 for large text. This is the baseline most websites must meet for legal compliance. WCAG AAA (enhanced accessibility): Requires 7:1 contrast for normal text and 4.5:1 for large text. This provides better accessibility for users with more severe vision impairments. Most organizations aim for AA compliance as the standard, with AAA as an aspirational goal for critical content.
What counts as "large text"?
According to WCAG, large text is defined as 18pt (24px) or larger, or 14pt (18.66px) or larger if bold. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because larger characters are easier to read even with less contrast. This is why our visual preview shows multiple text sizes — to help you see how your colors perform across different use cases.
How do I fix failing contrast?
If your color combination fails WCAG standards, try these approaches: Darken the text color or lighten the background (or vice versa). Use our automatic suggestions which adjust colors in small increments to reach AA compliance. Try complementary colors from opposite sides of the color wheel. Test with real users, especially those with vision impairments. Remember: black text on white background always passes with a perfect 21:1 ratio, making it a safe fallback for critical content.
⚠️ Note: This tool checks color contrast only. Complete accessibility requires proper HTML semantics, keyboard navigation, screen reader support, and more. Use this as one part of a comprehensive accessibility strategy.