Adjust text only
Keep your current background.
Readable text
- Text color
- Background
All four checks pass
← All tools
[ 03 / DESIGN ]
Color Contrast Checker
Test a color pair, preview your text, and check WCAG contrast targets.
Make every word readable.
Good contrast helps more people read your message.
Contrast ratio14.02:1
AA / Normal text ≥ 4.5:1PASS
AA / Large text ≥ 3:1PASS
AAA / Normal text ≥ 7:1PASS
AAA / Large text ≥ 4.5:1PASS
Suggestions to pass every check
Your colors already pass all four contrast checks.
Aim for at least 7:1. These options lighten or darken your colors and pass all four contrast checks.
Neither color can stay unchanged at 7:1. Try adjusting both colors.
Adjust background only
Keep your current text color.
Readable text
- Text color
- Background
All four checks pass
Adjust both colors
Lighten one color and darken the other.
Readable text
- Text color
- Background
All four checks pass
Checks opaque sRGB colors only. Large text means at least 24px, or 18.67px bold. A passing color pair is one part of accessible design. WCAG 2.2 contrast guidance ↗
Your inputs stay in this browser. These tools do not upload your text or colors.