CSS and design
Color Contrast Checker
Make sure your text is readable: check WCAG contrast and get a passing color suggestion.
- Runs in your browser
- Instant results
- Free, no sign-up
Loading the tool…
How to use the Color Contrast Checker
- Enter or pick the text and background colors.
- Read the ratio and the AA / AAA results.
- If it fails, apply the suggested color.
Frequently asked questions
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text and UI components. AAA needs 7:1 and 4.5:1.
What counts as large text?
At least 24px regular, or about 18.7px (14pt) bold.
Why does contrast matter?
Good contrast helps people with low vision and anyone reading in bright light, and is often a legal requirement.