Color Contrast Checker
Test whether your text and background colours meet WCAG accessibility standards. See the exact contrast ratio and AA/AAA pass or fail at a glance.
The quick brown fox jumps over the lazy dog.
Small text sample — 14px
How to use color contrast checker
- Set two colours
Choose your text colour and background colour.
- Read the ratio
The contrast ratio updates live between 1:1 and 21:1.
- Check the grades
See whether the pair passes WCAG AA and AAA for normal and large text.
Features
Instant pass/fail against both accessibility levels.
Large text has an easier threshold, shown separately.
A sample paragraph renders in your chosen colours.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18.66px bold or 24px regular and above. Larger text is easier to read, so it has a lower requirement.
Why does contrast matter?
Sufficient contrast makes text readable for people with low vision or colour deficiencies, and in bright conditions.