WCAG Contrast Checker
Check if your color combinations meet accessibility standards
Preview Text
The quick brown fox jumps over the lazy dog.
Small text sample for WCAG AAA readingFrequently Asked Questions
What is Color Contrast?
It's the difference in luminance between two colors (text and background). High contrast ensures that text is readable for everyone, including people with visual impairments.
What are WCAG AA and AAA standards?
WCAG (Web Content Accessibility Guidelines) AA requires a contrast ratio of 4.5:1 for normal text. AAA is stricter, requiring 7:1 for maximum accessibility.
Why should I use a Contrast Checker?
A design might look good to you, but it might be unreadable for users with color blindness or those using screens in bright sunlight.
What is the minimum contrast for large text?
For 'Large Text' (typically 18pt or bold 14pt), the AA requirement drops to 3:1, as larger characters are naturally easier to read.
Does contrast affect SEO?
Indirectly, yes. Google prioritizes user experience (Core Web Vitals). Poor accessibility can lead to higher bounce rates, which negatively impacts your ranking.
Can I check contrast for UI components like buttons?
Yes. You should ensure the button text has enough contrast against the button color, and the button itself stands out from the background.
How do I fix a 'Failed' contrast result?
Our tool suggests 'Closest Passing Colors' by slightly darkening or lightening your chosen shades until they meet the required ratio.
Is black on white the highest contrast?
Yes. Pure black (#000000) on pure white (#FFFFFF) provides the maximum possible ratio of 21:1.
Does 'Dark Mode' improve contrast?
Not necessarily. Some dark mode palettes use low-contrast grays that are harder to read than traditional black-on-white text.
How accurate is the ratio calculation?
It uses the official luminosity formula defined by the W3C, making it a reliable standard for professional accessibility audits.