Kroma | Color Blindness Accessibility Checker for User Interfaces

Use Kroma

Kroma

Color Blindness Accessibility Checker for User Interfaces

My Role

Product Designer

Team

1 Product Designer

1 Front-end Dev

Timeline

April - July 2023

Toolstack

Figma

Vite + React

Kroma is a free and intuitive color blindness accessibility checker designed for product and UI/UX designers. It allows users to upload their UI screens and instantly see how they appear to individuals with various types of color vision deficiencies. By removing paywalls and upload limits, Kroma aims to promote accessible design practices within the design community, ensuring that visual communication is inclusive for everyone.

Problem

As a product designer, I often struggled to validate how my UI designs appeared to users with color blindness. While existing tools like Stark and AXE Tools offered simulation features, they were usually locked behind paywalls or had limitations like 10-screen caps on free plans. I needed something faster, more accessible, and limitless — not just for myself, but for the broader design community.

Idea

So I teamed up with a developer friend and built Kroma, a free and simple color blindness accessibility checker. The idea was to provide an easy way for designers to upload their UI screens and see how they look for people with different types of color vision deficiency — without any paywalls or upload limits.

Users & Research

Before building Kroma, I researched various types of color blindness and discovered:

Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women globally.
Protanomaly and deuteranomaly are among the most common forms, followed by tritanomaly and total color blindness.
Current design trends rely heavily on color for visual communication, often ignoring accessibility.

✻ Product Designers

Product designers often work on multi-platform experiences where visual consistency and clarity are crucial. Kroma helps them ensure that UI elements (like buttons, alerts, and graphs) remain distinguishable and functional for color-blind users.

❖ UX/UI Designers

These designers are responsible for creating visually intuitive and user-friendly interfaces. Kroma allows them to spot potential accessibility issues early in the design process, preventing poor user experiences for people with vision impairments.

✦ Design Educators

Instructors teaching accessibility, human-centered design, or visual communication can use Kroma as a classroom tool to demonstrate the real-world impact of color choices on usability.

⧗ Accessibility Testers

These professionals are tasked with auditing and ensuring products meet accessibility standards (like WCAG). Kroma provides a fast and free way to visually verify that color contrast and UI clarity are sufficient for users with various color vision deficiencies.

What We Built?

In just three weeks, we released the MVP of Kroma with the following features:

Upload a single UI screen
Automatically generate and download simulations for: Protanomaly, Deuteranomaly, Protanopia, Tritanomaly, Deuteranopia, Tritanopia, Monochromacy, and Achromatopsia.

Protanomaly

Reduced sensitivity to red light; reds appear weaker and more greenish.

Deuteranomaly

Reduced sensitivity to green light; greens appear weaker and more red-like. Most common type.

Protanopia

No red cone cells; reds appear dark and are often confused with black or dark gray.

Tritanomaly

Reduced sensitivity to blue light; blues and greens are harder to distinguish. Very rare.

Deuteranopia

No green cone cells; greens and reds are hard to tell apart.

Tritanopia

No blue cone cells; blues and yellows are hard to distinguish. Very rare.

Monochromacy

Complete color blindness; only shades of gray are seen.

Achromatopsia

Total absence of color vision, often with light sensitivity and poor visual acuity.

Supported Color Blindness Types

What's Next?

We have a roadmap in place for upcoming features:

Phase 2:

Google login
Personal dashboard
Bulk upload
Paste image via URL

Phase 3:

Educational guides and best practices for accessible UI design
Resources for designing in monochrome modes

Outcome: What I have learned?

Designing for accessibility is not just a feature—it's a responsibility.
Many designers underestimate how many users are affected by visual impairments.
Current design aesthetics often ignore color accessibility; designing with fewer colors or offering monochrome alternatives can be game-changing.
Working on this project helped me improve my understanding of front-end development handoff, product scoping, and collaborative iteration.

This story ends here yet the journey continues...

🎉 Thanks for Reading!

Thanks for taking the time to explore this project. I hope you enjoyed the deep dive into the process, challenges, and learnings behind it.

🌍 Also Published On

🔍 Explore More

Jotform Logbook

An internal tool for better company awareness

Brifl

A collaborative form-building platform designed to bridge the gap between creators and clients.