Color Contrast Checker
Check if your text color meets WCAG 2.1 contrast requirements. Test AA and AAA compliance for normal text, large text, and UI components.
Large Text Preview
This is how normal text looks with your color combination.
And this is small text — the hardest to read for users with low vision.
Inverted Preview
See how colors look when swapped (useful for hover/active states).
Why Color Contrast Matters
Accessibility
1 in 12 men and 1 in 200 women have color vision deficiency. Low contrast text is unreadable for people with low vision, making your content inaccessible to millions.
Legal Requirements
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text. ADA and EAA lawsuits frequently cite color contrast as a violation.
Readability
Even users with perfect vision struggle with low-contrast text, especially on mobile screens in bright environments. Good contrast improves reading speed by up to 20%.
SEO Impact
Google's Lighthouse audits check color contrast. Poor accessibility scores can indirectly affect search rankings as Google increasingly prioritizes user experience.
WCAG Contrast Requirements
| Element | AA (Required) | AAA (Enhanced) |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | 7:1 |
| Large text (≥ 18pt) | 3:1 | 4.5:1 |
| Bold text (≥ 14pt) | 3:1 | 4.5:1 |
| UI components | 3:1 | 3:1 |
| Graphical objects | 3:1 | 3:1 |
Frequently Asked Questions
What contrast ratio should I aim for?
For WCAG AA compliance (the legal standard), aim for at least 4.5:1 for normal text and 3:1 for large text (18pt+). For AAA (enhanced), aim for 7:1 and 4.5:1 respectively. We recommend targeting AA as a minimum.
What counts as large text?
Large text is 18pt (24px) or larger, OR 14pt (18.66px) bold or larger. Large text has a lower contrast requirement because it's inherently more readable due to its size.
Does color contrast affect SEO?
Indirectly, yes. Google Lighthouse includes contrast checks in accessibility audits. Poor accessibility can increase bounce rate (users leave if they can't read content), which is a negative ranking signal.
How do I fix contrast issues on my website?
The easiest fix is to use darker text on light backgrounds or lighter text on dark backgrounds. Use this tool to test combinations before implementing. Many CSS frameworks (Tailwind, Bootstrap) provide pre-checked color palettes.