A colour combination can look fine in a design file and still be unreadable for users with low vision, in bright sunlight, or on a cheap screen. This tool removes the guesswork: type a foreground and a background hex code and you get the exact WCAG contrast ratio plus a live preview of a heading, body paragraph, button and link in those exact colours — so you can both measure and see the result before committing the palette.
How it works
WCAG defines contrast in terms of relative luminance. For each sRGB channel value c (normalised to 0–1):
c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4The channel results are weighted and summed:
L = 0.2126 * R + 0.7152 * G + 0.0722 * BThe contrast ratio between two colours is then:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)This produces a value from 1:1 (identical colours) up to 21:1 (pure black on pure white). The tool runs this formula on every keystroke and compares the result against the WCAG thresholds.
Thresholds and how to read the result
| Requirement | Ratio |
|---|---|
| AA normal text | 4.5:1 |
| AA large text (18pt / 14pt bold) | 3:1 |
| AAA normal text | 7:1 |
| AAA large text | 4.5:1 |
| UI components and graphics | 3:1 |
Tips
- If a pair only just clears
4.5:1, nudge the darker colour a few shades darker — sub-pixel rendering and low-end screens eat into your margin. - Body text is the strictest case. If small text passes, headings and buttons usually pass too.
- Contrast is necessary but not sufficient — also check colour-blind safety with the palette checker, and never rely on colour alone to convey meaning.
- Everything runs locally in your browser, so you can paste brand colours from an unreleased product without anything leaving your device.