Low-contrast text is one of the most common accessibility failures on the web, and one of the easiest to fix. The ChrysoKit Contrast Checker tells you in plain language whether your color pair passes WCAG AA or AAA, for both normal and large text.
Why use it
Reading a contrast ratio is one thing. Knowing what to do with it is another. This tool spells it out: pass or fail, at which level, at which text size. No spec spelunking required.
How to use the Contrast Checker
- Enter or pick a foreground (text) color.
- Enter or pick a background color.
- Read the ratio and the four pass/fail badges.
- Adjust either color until you hit the level you want.
Features worth knowing
WCAG AA and AAA
Both common levels are checked side by side.
Large vs normal text
Pass thresholds differ for headings; the checker handles both.
Live preview
Sample text renders with your colors so you see the result, not just the number.
Pro tips
- AA requires 4.5:1 for normal text and 3:1 for large text. AAA bumps those to 7:1 and 4.5:1.
- If a brand color fails, darken the text rather than tinting the background. It usually keeps the brand intact.
- Re-check after enabling dark mode. Contrast can flip from passing to failing when both colors invert.
Privacy first. The Contrast Checker runs entirely in your browser. Nothing you enter is sent to a server.
Run every text-on-color decision through the Contrast Checker before it ships. Future you (and your readers) will thank you.
Open the tool: Contrast Checker →