Color Contrast CheckerEnsure Your Designs Are Accessible to Everyone
Check if your color combinations meet WCAG accessibility standards. Test text readability and get instant AA/AAA compliance ratings for your brand colors.
Colors
Results
Contrast Ratio
21.00:1
Excellent
WCAG Compliance
Normal text: Text smaller than 18pt (or 14pt bold)
Large text: Text 18pt+ (or 14pt+ bold)
AA: Minimum contrast (4.5:1 normal, 3:1 large)
AAA: Enhanced contrast (7:1 normal, 4.5:1 large)
Live Preview
Heading Text
This is normal body text. Check how readable it appears with your chosen color combination.
This is small text, which requires even better contrast for readability.
Inverted Preview
This shows your colors inverted. Useful for checking both light and dark mode variations.
Small text preview with colors swapped.
How to Check Color Contrast
Ensure your designs meet accessibility standards in three simple steps.
Enter Your Colors
Input your text (foreground) color and background color using the color pickers or by entering hex values directly.
Check Compliance
Instantly see your contrast ratio and whether it meets WCAG AA and AAA standards for both normal and large text.
Adjust as Needed
Use the swap button to test inverted colors, and adjust until you achieve the accessibility level you need.
Frequently Asked Questions
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility. Adequate color contrast ensures that people with visual impairments, color blindness, or those viewing in poor lighting conditions can read your content.
What's the difference between AA and AAA compliance?
AA is the minimum recommended level, requiring a 4.5:1 ratio for normal text and 3:1 for large text. AAA is the enhanced level with stricter requirements (7:1 for normal text, 4.5:1 for large text).
What counts as 'large text' in WCAG?
Large text is defined as text that is 18pt (24px) or larger, or 14pt (18.5px) bold or larger. Large text has lower contrast requirements because it's easier to read.
Do I need AAA compliance for my website?
AA compliance is typically sufficient for most websites and is often the legal requirement. AAA is recommended for sites targeting users with visual impairments or for maximum accessibility.
Build an accessible brand identity
Use our AI-powered logo designer to create professional, accessible logos for your brand.
Start Designing