Flat vector illustration of a frustrated designer holding their head while color swatches with pass and fail marks float around a desk workspace.

Building an Accessible Color Palette (Without the Guesswork)

ByMichael Gillihan

I’ve used a lot of color contrast checkers. They all do roughly the same thing: you plug in two colors, they tell you if you’ve passed or failed WCAG requirements, and then you’re on your own.

Which is fine, I guess. But I don’t need a tool to tell me I’ve failed. I need a tool to help me fix it.

The workflow I always found myself in: pick a brand color, test it, fail, nudge the lightness, test again, fail again, nudge some more. Eventually I’d land on something that passed, but I’d have no idea if it was the closest passing color to my original or if I’d overshot by a mile. And then I’d wonder… is there a single background color that works with both light AND dark text? Let me spend 20 minutes finding out. Spoiler alert — most of the time there isn’t, and there went 20 minutes of my life I’ll never get back.

So I built a thing.

Color Contrast Checker, a free WCAG 2.2 contrast tool that does some things a lot of the other tools out there don’t:

  1. Suggests the nearest accessible color when your combination fails. Not “try something darker” — an actual hex code that preserves your hue and saturation while shifting the lightness just enough to pass.
  2. Tests both light and dark text simultaneously. Because I’m usually evaluating both anyway.
  3. Finds a Universal Color. This is a feature I haven’t come across. The checker calculates whether there’s a single, similar color variation that passes contrast requirements with both your light and dark colors at your selected WCAG level. If one exists, you get it. If it doesn’t, the tool tells you that too. Which is honestly just as valuable. Now I can stop wondering.

I’m not sure how often I’d actually use the universal color in practice. But knowing the answer exists (or doesn’t) saves me from going down that rabbit hole on every project.

The Build

This whole thing (including this post) was an experiment in AI-assisted development. The MVP — functional contrast checking with color suggestions — took one prompt and about 10 minutes. I’m not exaggerating. The core logic, the UI, the WCAG calculations, all working.

A couple hours of polish followed: tightening up the design, making sure the tool itself met WCAG 2.2 AA standards (would be a bit ironic if it didn’t), setting up hosting, the repo, documentation. But the heavy lifting was done while I was on a bathroom break, lol.

I’ve been doing this long enough to remember when building something like this would’ve been a weekend project at minimum. Now it’s a Tuesday morning from idea to launch.

Give the Color Contrast Checker a spin, or check it out on GitHub.

It’s free, zero dependencies, and works in the browser. No account, no install, no 4MB JavaScript bundle. Just paste your colors and get answers.