Color Contrast Checker
Check text and button colors against WCAG AA and AAA.
- Free
- No signup
- Runs in your browser
How to use Color Contrast Checker
- Pick a text color and a background color, or type them as hex values like #1a2b3c.
- Read the contrast ratio and whether it passes WCAG AA and AAA.
- Check the live sample text to see how it feels at normal size.
- If it fails, press a suggested color to fix it.
Tip: AA needs 4.5:1 for normal text and 3:1 for large text. Aim for at least AA on everything users read.
Launch day is here
Body text looks like this at 16px. Make sure everyone can read it.
Contrast ratio 6.36:1
- PassNormal text AA (4.5:1)
- FixNormal text AAA (7:1)
- PassLarge text AA (3:1)
- PassLarge text AAA (4.5:1)
- PassButtons, icons, borders AA (3:1)
Launched something?
List it on LaunchAF for a weekly launch and a permanent dofollow backlink.