A minimal, multi-context color contrast tool — built to test a multiple colors against various backgrounds, and secondary UI elements in real time. Designed to answer a simple, but often neglected question:

👉 “Can this one color work everywhere?”

Try it live at vedmakk.github.io/kontrast – no sign-up, no clutter.

Most contrast checkers only let you compare two colors at a time – foreground vs background. That’s great for checking compliance, but not for picking colors that actually work across your whole UI.

I built kontrast because I couldn’t find a single tool that let me:

• Test one color against both light and dark backgrounds
• See how it contrasts with a secondary color
• Tweak all of them live and get instant WCAG feedback
• Understand not just ratios — but relationships

It is inspired by Contrast Grid and tools like ColorKit – but combines the real-time feedback of the latter with the grid view of the former, plus it adds foreground-background, background-background and foreground-foreground comparisons which allows you to see how multiple colors work together in different contexts.

• 🧠 Designed for making colors work in design systems, not just ensuring compliance
• 🎯 Helps find universal colors for theming (light/dark)
• ⚡ Instant WCAG contrast updates (AA/AAA) across all comparisons
• 🧪 Built for real-world UI decisions, not just box-checking

🎨 Multiple Color Comparison
Pick a primary, secondary, and multiple background colors — see how all pairs perform.

🌗 Dual Theme Support
Test against both light and dark backgrounds simultaneously.

📏 Live WCAG Evaluation
Every contrast pair updates instantly with WCAG 2.1 compliance labels.

🎛️ Tweak Everything
Use sliders, hex inputs, or color pickers — changes are reflected immediately.

🔢 Contrast Ratios
See the exact contrast ratio for each comparison.

🎨 Color Comfort Scores (Experimental 🧪)
Get a sense of how comfortable a color combination is beyond WCAG contrast by factoring in ambient light, color harmony, and visual strain. Helps detect harsh or fatiguing combinations that pass contrast checks but may still feel uncomfortable.

💡 Smart Suggestions (coming soon)
Get nearby color suggestions that pass contrast while staying visually close.

• React
• TypeScript
• Vite.js
• Redux Toolkit
• @emotion/react
• Chroma.js – Color math & contrast

# Clone the repo git clone https://github.com/vedmakk/kontrast.git cd kontrast # Install dependencies bun install # Start development server bun run dev

This project is licensed under the MIT License — use freely, modify openly, and share widely.
See the LICENSE file for full details.

The Fira Code font is included under the terms of the SIL Open Font License, Version 1.1.
See the Fira Code License for more information.