Put in a text colour and a background colour. You get the contrast ratio, what it passes under WCAG 2.2, and the nearest colour that would pass. It runs in your browser; nothing is sent anywhere.
Hex, rgb(), hsl() and colour names all work.
| Rule | Needs | Result |
|---|
Large text, 24px
Normal body text at 16px, which is what most of a page is made of.
Small print at 13px
| Content | AA | AAA |
|---|---|---|
| Normal text (under 18.66px bold / 24px) | 4.5:1 | 7:1 |
| Large text (18.66px bold or 24px and up) | 3:1 | 4.5:1 |
| Interface parts: icons, input borders, focus rings | 3:1 | — |
| Disabled controls and decoration | No requirement, but people still have to read them | |
The ratio compares the two colours' relative luminance: (lighter + 0.05) / (darker + 0.05), from 1:1 to 21:1. Semi-transparent colours are blended over the background first, which is what browsers show.
Picking colours by hand misses the ones you forgot: placeholder text, disabled buttons, a hover state, text over an image. ContrastForge, our Chrome extension, scans a live page and lists every failing pair with the smallest change that fixes it. It's in review at the Chrome Web Store now; see what it does.