Free tool · WCAG 2.2
Accessible color, checked in seconds
About 1 in 12 men and 1 in 200 women live with some form of color vision deficiency, and everyone struggles with low-contrast text in sunlight. Enter any two colors to see their contrast ratio and whether they pass WCAG 2.2 — then read on for how to build palettes that pass by design.
17.06:1
The quick brown fox jumps over the lazy dog.
Body text at 14px regular weight.
What the ratios mean
3:1
Large text & UI
Minimum for text ≥24px (or ≥18.66px bold) and for icons, focus rings, and control boundaries (WCAG 1.4.3, 1.4.11).
4.5:1
AA body text
The baseline for normal text under WCAG 2.2 success criterion 1.4.3. Most legal requirements (EN 301 549, ADA guidance) point here.
7:1
AAA body text
Enhanced contrast (1.4.6). Aim here for long-form reading, older audiences, and anything viewed outdoors.
Building palettes that pass by design
- Assign roles, not just colors. A palette that names its text, background, and accent roles can be audited; a row of swatches cannot. Contrast is a property of a pair, never a single color.
- Fix lightness, keep hue. When a pair fails, nudge the lightness of one color while holding its hue. Hue carries a color's identity; lightness carries most of the contrast.
- Never communicate by hue alone. WCAG 1.4.1 requires that state (errors, selections, links) also differ in lightness, shape, or text — so it survives color-vision deficiency and grayscale printing.
- Test the real combinations. Check every text color against every background it actually sits on — including hover and dark-mode variants — not just the pair you designed first.
Check a whole palette at once
The studio audits every role pair in your palette, simulates five types of color vision, and suggests minimal fixes that keep your hues intact.
Want to go deeper? Read our guide on color accessibility or browse trending palettes — every one links to a page with its full contrast matrix.