I used to spend an embarrassing amount of time staring at my screen, squinting, and asking myself, "Is this gray actually accessible?" I’d tweak a hex code, refresh, squint again, and repeat the cycle until my eyes burned. It’s a ritual most frontend developers know well: the endless dance between aesthetic preference and WCAG compliance.
That’s why I built ColorWell. It’s a simple, private on-device AI tool that runs entirely in your browser. You give it a single base color, and it generates a full, WCAG-compliant palette instantly. No API calls, no server-side processing, and no data leaving your machine. Just instant, local generation.
The Problem with "Good Enough" Palettes
We’ve all been there. You pick a nice shade of blue for your primary button. It looks great on your high-end monitor. But then you deploy it, and a user with a laptop from 2015 reports that the text is hard to read. Or worse, you realize your light mode background doesn’t have enough contrast against your dark gray body text.
Traditionally, fixing this meant manually calculating contrast ratios or using a separate accessibility checker after the fact. It’s reactive. You design, then you check, then you fix. It breaks the flow.
I wanted to flip that script. I wanted the accessibility check to happen during the generation process, not after. The core idea behind ColorWell is simple: if the AI can generate a palette, it should generate one that is already compliant. No afterthoughts.
How It Works (Locally)
When you open ColorWell, you aren’t sending your design secrets to a cloud server. Everything happens right there in your browser using private on-device AI.
You start with a base color—maybe your brand’s primary hue. The local model then explores the color space around that base. It doesn’t just pick random shades; it calculates luminance and contrast ratios against standard text colors in real-time. If a generated shade fails WCAG AA or AAA standards for body text or large text, the model adjusts it immediately.
The result? A palette where you can actually trust the contrast. You don’t have to open a contrast checker tool to verify if your #F5F5F5 background works with your #333333 text. The tool guarantees it before you even see the code.
From Palette to Code, Without the Copy-Paste Fatigue
The real bottleneck for many developers isn’t finding the colors; it’s implementing them. I’ve wasted more hours than I care to admit copying hex codes from a design tool, pasting them into a CSS file, and then realizing I forgot to update the Tailwind config or the Figma tokens.
ColorWell bridges that gap. Once you have your palette, you can export it directly to:
- CSS Variables: Ready to drop into your
:root. - Tailwind Config: Formatted JSON that you can paste straight into your
tailwind.config.js. - Figma Tokens: Structured data that integrates cleanly into your design system.
This isn’t just about convenience; it’s about maintaining consistency between design and development. When the code output matches the visual intent exactly, you spend less time debugging style mismatches and more time building features.
Why Local Matters
In a world where every click sends data to a server, I’ve become a bit of a contrarian. I believe design tools should respect privacy and speed. By running the AI locally, ColorWell eliminates latency. There’s no loading spinner while a server processes your request. The palette appears as soon as you type the hex code.
More importantly, your color schemes stay on your machine. If you’re working on a client’s confidential brand guidelines, those colors never leave your browser. It’s a small detail, but it changes how you feel about using the tool. You’re not just generating colors; you’re working in a private, secure sandbox.
Building for the Next Step
I built ColorWell because I was tired of the friction between design and accessibility. I wanted a tool that respected my time and my privacy. It’s still early days, but the response from developers who are tired of manual contrast checking has been encouraging.
I’m curious—how do you currently handle color accessibility in your workflow? Do you check contrast ratios as you go, or do you leave it for a QA pass later?
Top comments (0)