Contrast Checker
Pick a text and background color — see the exact contrast ratio and whether it passes WCAG accessibility standards.
Live preview
The quick brown fox jumps over the lazy dog
Body text at normal size — this is what most of your website copy looks like. If it's hard to read here, it's hard to read for your visitors too.
Small print, captions and fine details need the strongest contrast of all.
What is color contrast, and what is WCAG?
Contrast ratio measures how distinguishable text is from its background, on a scale from 1:1 (white on white — invisible) to 21:1 (black on white — maximum). The Web Content Accessibility Guidelines (WCAG) set the internationally recognized minimums: 4.5:1 for normal text (AA level), 3:1 for large text, and 7:1 for the stricter AAA level.
This isn't just about legal compliance — though many countries now require accessible websites, and lawsuits over inaccessible sites keep rising. It's about real people: roughly 1 in 12 men has some color vision deficiency, and millions more browse on dim phone screens in bright sunlight. Light gray text on white might look elegant in a design mockup, but a large share of your visitors literally cannot read it.
Low contrast also quietly hurts business. If visitors strain to read your prices, your button labels or your signup form, they leave. Checking contrast takes ten seconds and is one of the highest-return fixes in web design.
Use this checker while choosing brand colors, button styles and text treatments. Aim for AA as the minimum everywhere, and AAA for body text when you can. If a favorite color combination fails, try darkening the text or lightening the background slightly — small shifts often fix the ratio without changing the look.