A WCAG contrast checker with fixes, not just scores
Low contrast is the most common accessibility problem on the web and it affects everyone reading on a phone in sunlight, not only people with low vision. This contrast checker calculates the WCAG 2.x contrast ratio between two colours, tells you which success criteria they meet and, when they fail, suggests the closest colour with the same hue that passes, or tells you when no text colour can reach that level on the chosen background.
WCAG contrast requirements
| Level | Normal text | Large text | UI components & graphics |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 (SC 1.4.11) |
| AAA | 7:1 | 4.5:1 | — |
"Large text" means at least 24 CSS pixels, or at least 18.66 pixels when bold (18 pt and 14 pt respectively). Logos and purely decorative text are exempt; placeholder text and disabled-looking but active controls are not.
How the ratio is calculated
Each colour's relative luminance L is computed from its linearised red, green and blue channels: L = 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. It ranges from 1:1 (identical colours) to 21:1 (black on white). Results are truncated, not rounded, so 4.499 counts as a fail — just as automated audit tools do.
Example
Grey #777777 on white gives 4.47:1: fine for large headings, but it fails AA for body text. The checker suggests #767676, which reaches 4.54:1 while looking almost identical. Tailwind's #6b7280 (gray-500 in v3) reaches 4.83:1 and passes AA.
Smart suggestions
Instead of jumping to black, the suggestion keeps the hue and chroma of your colour and only changes its lightness in OKLCH, in both directions, then picks the smallest change that meets the target. Your brand colour stays recognisable and the design barely changes. On a mid-tone background not even black or white reaches AAA; the checker then says so and names the best possible colour and its ratio instead of offering a false fix.
Beyond the ratio
- Contrast is only one factor: font weight, size and line length matter too. Thin fonts need more contrast than the minimum.
- Do not rely on colour alone to convey meaning; check your palette with the colour blindness simulator.
- WCAG 3 is expected to use a different model (APCA). Until it is final, WCAG 2.2 remains the legal and audit reference.
Build accessible palettes with the color palette generator and derive text shades with the tints and shades generator.
Common questions from audits
Automated audits such as Lighthouse and axe flag every text element below the threshold, including placeholder text in form fields, disabled-looking links and text on top of images. For text over photos, check the contrast against the lightest and darkest parts of the image behind the text, or add a semi-transparent overlay; the checker accepts rgba() foregrounds and blends them before calculating. Icons that convey meaning, input borders and focus indicators fall under the 3:1 non-text contrast rule, so the preview includes an outlined button and an icon to help you judge them.
Input formats
Both fields accept HEX (3, 6 or 8 digits), rgb(), hsl(), oklch() and CSS colour names, so you can paste values straight from DevTools. Use Swap to test the inverse pair, which is useful for dark-mode designs.
Privacy
The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.