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.
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.
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.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.