I got tired of color contrast tools that break brand colors. So I built my own.

Danish Khan — Mon, 09 Mar 2026 13:20:00 +0000

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.

I built a tint & shades generator for design tokens and Figma

Danish Khan — Tue, 30 Dec 2025 10:08:27 +0000

I often need clean color scales for design systems (primary-50 → primary-900, etc.), and got tired of building them manually or using tools that don’t fit dev workflows.

So I built Tint & Shades Palette Generator – a small tool to generate tints and shades from a base color, with exports that are friendly for design tokens and Figma.

What it does

Generates tints and shades from a single base color
Uses HSL for smoother, more predictable ramps
Lets you quickly build scales like 50, 100, 200, …, 900
Exports:
- JSON (design tokens style)
- CSS custom properties (--color-primary-50, etc.)
100% client-side, works offline after first load

Live tool: https://tintandshadesgenerator.com/

Source: https://github.com/Danishmk1286/tint-shade-palette-generator

How I use it

To create base palettes for design systems
To generate scales that I then test in Contrast Buddy (my WCAG contrast checker)
To share consistent palettes between Figma and code

Feedback?

I’d love to know:

How do you currently build your color scales?
What export formats or integrations would make this more useful (Tailwind config, Style Dictionary, etc.)?

Issues / ideas / PRs welcome:

👉 https://github.com/Danishmk1286/tint-shade-palette-generator

DEV Community: Danish Khan

I got tired of color contrast tools that break brand colors. So I built my own.

I built a tint & shades generator for design tokens and Figma

What it does

How I use it

Feedback?