AI-powered WCAG 2.1 / 2.2 color contrast checker that preserves brand identity while making color combinations accessible.

🌐 Live Demo: https://www.thecolorcontrastchecker.com/

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

Smart Color Contrast Assistant is a machine-learning powered WCAG contrast checker built for designers, frontend engineers, and accessibility specialists.

Unlike traditional tools that only say "Pass" or "Fail", this assistant:

• Detects accessibility issues
• Suggests the closest brand-safe accessible alternatives
• Ranks results using perceptual color difference (Delta E CIEDE2000)
• Supports WCAG AA and AAA for normal and large text

It helps teams fix accessibility problems without compromising brand identity.

Brand colors often fail WCAG contrast requirements.

Most contrast checkers:

• Only identify the issue
• Offer no intelligent fix
• Force manual trial and error
• Lead to inconsistent accessible alternatives

This results in:

• Time wasted adjusting colors manually
• Compromised aesthetics
• Inconsistent design systems
• Frustration between design and engineering teams

• AA and AAA validation
• Normal and large text thresholds
• Real-time ratio calculation

• Uses TensorFlow.js for ML-based recommendations
• Suggests the minimum visual adjustment needed
• Preserves hue when possible
• Prioritises brand similarity

• Delta E (CIEDE2000) sorting
• Ensures suggested colors are perceptually closest to original

Preview how color pairs appear for users with:

• Protanopia
• Deuteranopia
• Tritanopia

• HEX, RGB, HSL
• Interactive color picker

• Instant contrast ratio
• Live pass/fail indicators
• Immediate suggestion updates

Instantly invert foreground and background colors.

All contrast calculations run in the browser — no data leaves your machine.

1. User enters foreground and background colors.
2. The system calculates relative luminance and contrast ratio using WCAG formulas.
3. If contrast fails:
   • TensorFlow.js model evaluates color space
   • Generates minimal adjustments
   • Ranks suggestions using Delta E
4. Only accessible suggestions are displayed.

The goal is maximum accessibility with minimum visual change.

• React 18 · TypeScript · Vite 5
• Tailwind CSS · Shadcn/ui
• TensorFlow.js · React Router

• Node.js · Express
• SQLite (better-sqlite3) · JWT Authentication

• Node.js 18+
• npm or yarn

git clone https://github.com/Danishmk1286/WCAG-Contrast-Checker-Ai.git
cd WCAG-Contrast-Checker-Ai
npm install
cp .env.example .env
npm run dev

App runs at: http://localhost:5173

cd server
npm install
cp .env.example .env
npm start

API runs at: http://localhost:3001

VITE_API_BASE=https://api.yourdomain.com/api

PORT=3001
NODE_ENV=development
JWT_SECRET=your-secret-key
SESSION_SECRET=your-session-secret

See .env.example files for full configuration.

├── src/
│   ├── components/     # UI Components
│   ├── pages/
│   ├── hooks/
│   ├── lib/            # Color & WCAG utilities
│   └── data/
├── server/
├── public/
├── scripts/            # ML model logic
├── open_core/
└── docs/

• Core contrast calculations run locally — no data sent to any server
• No custom backend required for color checking
• Backend only used for CMS/blog features
• Environment variables protect API keys

Contributions are welcome!

1. Fork the repository
2. Create a branch: git checkout -b feature/amazing-feature
3. Commit: git commit -m "Add amazing feature"
4. Push: git push origin feature/amazing-feature
5. Open a Pull Request

• Improved ML model training
• Better perceptual color ranking
• Unit & integration testing
• UI refinements & performance optimisation
• Internationalization
• Documentation improvements

This project is licensed under the MIT License — see the LICENSE file for details.

• WCAG 2.2 Guidelines
• TensorFlow.js
• Tailwind CSS