How to check color contrast
Type or pick a text color and a background color. The preview shows both at real text sizes, and the result row shows the contrast ratio alongside a pass or fail for each WCAG level. If the pair falls short, the checker nudges the text color lighter or darker, keeping its hue, until it reaches 4.5:1 (AA) or 7:1 (AAA), and offers that color with a single click. The math runs in your browser.
WCAG contrast requirements at a glance
| Content | Level AA | Level AAA | WCAG criterion |
|---|---|---|---|
| Normal text (under 24px, or under 18.66px bold) | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| Icons, input borders, focus rings, chart lines | 3:1 | — | 1.4.11 |
| Logos, decorative images, disabled controls | Exempt | Exempt | — |
Common contrast failures
The usual offenders are mid-grey body text on white (#999 on #fff is only 2.85:1), white text on brand colors such as light orange or teal, placeholder text in form fields, and text laid over photos. A middle grey like #767676 is about the lightest grey that still passes 4.5:1 on pure white. For text on images, add a dark overlay or a solid backdrop behind the text and check the text against that backdrop color.
To build an accessible palette from scratch, start with the Color Palette Generator, then run each text and background pairing through this checker. The Hex to RGB Converter helps when a design file gives you colors in another format. For why the thresholds sit where they do and how to fix a failing brand color, read the guide to WCAG color contrast.