Colour Contrast Auditor
Paste a palette and find out which pairings actually pass.
BeginnerWeb appDev tool6–12hAI-buildable 5/5no setup
Enter a set of colours and get the full contrast matrix — every foreground against every background, with WCAG AA and AAA pass or fail marked. Then the useful bit: for any failing pair, suggest the nearest passing colour. A tool you'll reach for on every project afterwards.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Add colours to a palette by hex or picker
- A matrix shows the contrast ratio for every colour pair
- AA and AAA pass or fail is marked for normal and large text
- Clicking a pair shows a live preview of that text on that background
- For a failing pair, the nearest passing alternative is suggested
- The palette persists across reloads
The interesting part
- Implementing relative luminance and the WCAG ratio correctly
- Searching colour space for the nearest passing variant while keeping the hue
- A matrix that stays readable as the palette grows
Once it works
- Import a palette from a CSS file
- Simulate common colour vision deficiencies
- Export the passing pairs as CSS custom properties
Suggested stack
reacttypescripttailwind