How to use it
- Type or pick the text and background colors (hex, rgb() and hsl() all work), or grab one from your screen with the eyedropper.
- Read the ratio and the table: AA needs 4.5:1 for normal text and 3:1 for large text and icons.
- If it fails, click a suggested color in the “Fix it” row.
- Check the preview through color-blind eyes, then copy the link for your team.
What the contrast ratio measures
WCAG (the Web Content Accessibility Guidelines) compares the relative luminance of two colors: (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 (identical colors) to 21:1 (black on white).
| Level | Normal text | Large text* | Icons, borders, form controls |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
*Large text means at least 24px, or 18.66px bold (18pt or 14pt bold).
We round the ratio down to two decimals, so a 4.499 never shows up as a passing “4.50.”
“Fix it”: the nearest passing color
Most checkers just tell you it fails. We find the color that passes with the smallest change: hue and saturation stay put, and only lightness moves, in both directions. You get whichever is closer.
There are suggestions for both the text and the background, for AA and AAA. Your brand color stays recognizable, just a shade darker or lighter.
Opacity, color blindness and the eyedropper
- Transparent colors: set the foreground opacity with the slider. We calculate with the actual blended color, just as the browser paints it.
- Color-blindness preview: protanopia, deuteranopia, tritanopia and achromatopsia (Machado–Oliveira–Fernandes model). Contrast depends on luminance, so a good pair stays readable, but a “red means error, green means OK” signal may not.
- Eyedropper: in Chrome and Edge, pick a color from anywhere on your screen.
- Shareable link: both colors go after the # in the link, which browsers never send to our server.
Why not APCA?
APCA is the contrast model in the WCAG 3 draft and often predicts readability better. But it isn't a standard yet: neither the ADA guidance, Section 508 nor the EU's EN 301 549 refers to it. So WCAG 2.2 makes the call here.
Frequently asked questions
How much contrast does text need?
At AA, 4.5:1 for normal text and 3:1 for large text. At AAA, 7:1 and 4.5:1.
What counts as large text?
At least 24px regular, or at least 18.66px bold.
Do buttons and icons need contrast too?
Yes. WCAG 1.4.11 requires 3:1 against adjacent colors for graphics needed to understand the interface.
Does it match WebAIM?
Yes. It uses the same WCAG formula and rounds down to two decimals.
Are my colors sent anywhere?
No. Everything is calculated in your browser.