I built an AI-powered WCAG color contrast checker that preserves brand colors

#a11y #webdev #design #opensource

Most color contrast checkers just tell you “pass” or “fail”. That’s useful, but in real projects you usually have a brand palette you can’t just throw away.

So I built Contrast Buddy – an AI-powered WCAG color contrast checker that tries to fix your colors while keeping them on-brand.

What it does

Checks WCAG 2.1 / 2.2 AA/AAA for:
- Normal text
- Large text
Shows real-time:
- Contrast ratio
- Pass/fail status for AA/AAA
If it fails:
- Suggests accessible alternatives that stay visually close to your original colors
- Works with:
- AI mode (optional OpenAI API)
- Or non-AI algorithmic mode (no key required)
100% client-side, no custom backend

Live demo: https://www.thecolorcontrastchecker.com/

Source: https://github.com/Danishmk1286/WCAG-Contrast-Checker-Ai

How it works (high level)

At a high level:

Takes your foreground/background HEX values.
Calculates the contrast ratio and checks it against WCAG AA/AAA thresholds.
If it fails:
- In algorithmic mode, it searches for the nearest passing colors by tweaking lightness/saturation while keeping the hue close.
- In AI mode, it asks an LLM (via OpenAI API) for alternative colors that:
  - Meet WCAG
  - Stay close to your brand palette
- Suggested colors are validated again before being shown.

Under the hood it’s built with:

React 18
Vite
TypeScript
Optional OpenAI API for suggestions

Why I built this

I wanted something that:

Fits real workflows (brand colors, design systems, tokens)
Helps avoid last-minute “accessibility fixes” that break the visual identity
Can be used by:
- Designers
- Frontend devs
- Accessibility folks

Also, I wanted the entire tool to run in the browser for privacy reasons. If you enable AI, only the minimal color context is sent to the OpenAI API and you keep full control over the key.