Free tool · 🎨 Colour contrast & palette
Readable colours,proven by numbers.
Brand colours that fail contrast lose readers and accessibility audits. Test any pair, fix it with the nearest passing shade, and export the palette as CSS.
WCAG 2.2: normal text needs 4.5:1 (AA) / 7:1 (AAA); large text (≥24px or ≥19px bold) needs 3:1 / 4.5:1; UI components 3:1.
What it checks
Everything we would look at first on a client call.
Free, no sign-up, no email gate. If the report shows red, the fix is written next to it — and we are one click away if you would rather we did it.
- Contrast ratio with AA/AAA pass/fail for normal, large and UI
- Suggested nearest passing colour
- HEX ↔ RGB ↔ HSL conversion
- Palettetints, shades, complementary, analogous, triadic
- CSS variables and 50–900 scale to copy
FAQ
Common questions
Why 4.5:1?
It is the WCAG threshold at which most people with moderate low vision can read body text. Legal accessibility requirements in many markets reference it.
Dark mode?
Test both pairs; light grey on dark backgrounds often fails more than people expect.