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 colour 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) colour.
- Enter or pick a background colour.
- Read the ratio and the four pass/fail badges.
- Adjust either colour 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 colours 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 colour 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 colours invert.
Privacy first. The Contrast Checker runs entirely in your browser. Nothing you enter is sent to a server.
Run every text-on-colour decision through the Contrast Checker before it ships. Future you (and your readers) will thank you.
Open the tool: Contrast Checker →
Auditing an existing site for contrast: an afternoon's findings
Running a contrast audit on a typical small-business site... every text/background pair checked... produces a failure list so consistent across the web that it reads like a standard inventory.
The grey epidemic leads: body text at #777 on white (4.48:1, a hair under AA), captions at #999 (2.85:1, badly failing), and placeholder text at #aaa that nobody ever audited because it feels like furniture rather than content. Then the brand-colour failures: white button text on the brand's light blue (2.6:1), and links in that same blue on white, chosen for identity years ago by someone who never measured. Footer text on dark grey... designed at full screen brightness in an office, illegible on a phone outdoors. And text laid over hero photography, passing or failing depending on which photo marketing uploads that month, which is to say: failing.
The fixes were modest to the point of anticlimax. Greys darkened one or two steps (#777 to #595959 passes comfortably); the brand blue kept for decoration but darkened 15% for anything textual; a 45% overlay standardised behind hero text so the photo no longer gambles with readability. Total visual change: barely perceptible to the designer who made it. Total readability change for low-vision users, older eyes and everyone on a sunlit screen: the entire difference. Contrast remains accessibility's best ratio of impact to effort... an afternoon, once, with a checker open.