You run a contrast check. It fails. You change the color. It passes WCAG. But now it looks nothing like your brand.
Every designer knows this moment. And most contrast tools just leave you there.
The real problem
In real projects you are not working with random colors. You are working with a brand palette that a client spent months defining. When a tool says "just change the color," it is solving one problem and creating another.
I kept asking: why can't a contrast tool suggest accessible alternatives that actually stay close to the original?
Nobody had built it. So I did.
What I built
Smart Color Contrast Checker checks WCAG 2.1 and 2.2 AA/AAA compliance in real time. When a color fails, it suggests accessible alternatives that stay visually close to your original. Not just "here is a passing color." But "here is a passing color that still looks like your brand."
Two modes:
Algorithmic mode needs no API key. Runs entirely in the browser, nothing sent anywhere.
AI mode uses an optional OpenAI key to ask an LLM for brand-aware suggestions. Every suggestion is validated before you see it.
Source is open: GitHub
Also inside Figma
Color decisions happen in Figma, not in a browser tab. So I built a companion plugin that brings the same functionality directly into your design workflow. No context switching.
Who it is for
Designers working with brand palettes. Frontend devs verifying specs before shipping. Anyone building or auditing a design system.
Accessibility and good design should not be in conflict. The tooling just makes it feel that way.
Try it: thecolorcontrastchecker.com
If you have feedback, drop a comment or open an issue on GitHub. I read everything.
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.