How to check color contrast for WCAG accessibility
Color contrast is the difference in brightness between text and its background. When it is too low, many users cannot read the content. WCAG defines concrete ratios — 4.5:1 for normal text, 3:1 for large text — and a checker tells you in seconds whether a pair passes.
The ratios that matter
WCAG AA requires 4.5:1 for normal-size text and 3:1 for large text (18px+ or 14px bold). AAA raises the bars to 7:1 and 4.5:1. Interfaces that pass these ratios are readable for people with low vision and in sunlight.
- AA: minimum for public sites.
- AAA: the stricter standard for text-heavy content.
- Graphic elements and icons need 3:1 as well.
Check a pair with FreetoolsY
Enter your foreground and background colors into the WCAG Contrast Checker. It computes the exact ratio and instantly marks whether the pair passes AA or AAA. Adjust the values live until a pair you like is compliant — no guessing.
Design with contrast first
Pick text and background colors from the same palette, then verify before you ship the component. Combine the Contrast Checker with the Color Converter to test the exact hex values your CSS uses.