Accessible Colour Palette Generator

Colour contrast is one of the most common accessibility failures on the web. According to the 2025 WebAIM Million report, low contrast text appeared on 80% of homepages tested. It tops the list every single year.
Most contrast checkers test two colours at a time. That works fine for a quick check. But if you’re working with a full brand palette, you end up clicking back and forth, one pair at a time. It’s slow, and it’s easy to miss something.

A real example

I work with a nonprofit client who handles her own design work due to limited funding. When I reviewed her materials, colour contrast was the most consistent issue, not because she wasn’t trying, but because contrast failures are hard to spot without the right tool. A button that looks fine on your screen can fail WCAG standards with a ratio of 2.8:1. Without a checker, you’d never know.

What I built

I asked Claude, Anthropic’s AI assistant, to build a palette-level contrast checker. One prompt. The result is a free tool, available on this site, that tests every colour in your palette against every other colour, all at once.

Each colour pair shows its contrast ratio and a WCAG 2.1 result: AAA, AA, AA Large Text, or Fail. Click any pair for a full breakdown and a live text preview on the actual background colour.

You can add colours by hex code or colour picker, filter results to show only failures, and see exactly where your palette stands.

Why it matters

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text at Level AA. Under Canada’s Accessible Canada Act, federally regulated organizations face enforceable compliance deadlines starting in 2027.

Colour choices are no longer just a design preference. For many organizations, they’re a legal requirement.

Finding a contrast failure before launch costs nothing. Finding it during an audit costs considerably more.

Try the tool here → Accessible Colour Palette Generator