Design

Color Blindness Simulator

Simulate how a design appears to people with the common types of colour vision deficiency, and fix what the simulation reveals.

Drag & drop an image, or click to choose

Need this done properly for your business?

Radiatus delivers secure cloud, DevOps & compliance engineering.

Book a free consult

How common it is

Around one in twelve men and one in two hundred women have some form of colour vision deficiency, which is roughly 300 million people worldwide. For an interface with any meaningful audience, this is not an edge case; it is a substantial and entirely predictable slice of your users.

The types

Red-green deficiency is by far the most common, and splits into deuteranomaly and deuteranopia, affecting green perception, and protanomaly and protanopia, affecting red. Tritanopia, affecting blue and yellow, is rare. Achromatopsia, seeing no colour at all, is rarer still. Testing against deuteranopia catches the majority of real problems, and greyscale catches almost everything else.

Never let colour be the only signal

This is the entire rule, and everything else follows from it. A red field marking an error and a green one marking success are indistinguishable to a large share of users. Add an icon, a label, a pattern or a shape. A chart distinguished only by line colour needs different dash patterns or direct labels. Required form fields marked only in red need an asterisk or the word required.

Red and green together is the worst pairing

It is also the most common in status indicators, precisely the place where being misread matters most. Blue and orange carry a similar semantic weight, remain distinguishable to nearly everyone, and are the standard substitution. Where red and green must stay for convention, differentiate them by lightness as well as hue.

The greyscale test is faster than any simulator

Convert a screenshot to greyscale. Anything that becomes indistinguishable was relying on hue alone. It takes seconds, needs no plugin, and catches the large majority of problems a full simulation would find, which is why it is worth doing on every design before it ships.

Contrast is a separate requirement

A palette can be perfectly distinguishable to colour-blind users and still fail WCAG contrast, or the reverse. They are independent checks addressing different needs, and passing one says nothing about the other.

Frequently Asked Questions

Privacy & Security

All processing happens locally in your browser — nothing is uploaded.

Data: None
Client-side-Side
Active
v1.0

How to Use

Upload an image and choose a color-vision type to preview and download the simulation.

Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.