About the Color Contrast Checker
Low contrast text is one of the most common accessibility problems on the web. It makes content hard to read for people with low vision or color blindness, and for everyone reading on a phone in bright sunlight. The Color Contrast Checker calculates the contrast ratio between your text and background colors using the official WCAG 2.1 formula.
It instantly shows whether your colors pass Level AA (4.5:1 for normal text, 3:1 for large text and UI components) and Level AAA (7:1 for normal text, 4.5:1 for large text). A live preview shows headings, body text and a button in your chosen colors. Good contrast improves readability, user experience and compliance with accessibility laws.
How to use the Color Contrast Checker
- Choose the text (foreground) color.
- Choose the background color.
- Read the contrast ratio and pass/fail results.
- Adjust colors until they pass the level you need.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 and 4.5:1.
What counts as large text?
Text that is at least 24 CSS pixels (18pt) regular, or about 18.66 pixels (14pt) bold.
Does contrast matter for SEO?
Indirectly, yes. Readable content keeps visitors engaged, and accessibility is part of good page experience.