What the simulator does
Colour vision deficiency changes how some colors are perceived. This simulator models several specific forms by transforming the colors in your palette, giving an approximation of how they may appear under each condition.
The more valuable output is the pairs listed under each row. A palette can look acceptable in every simulated row and still have colours that are difficult to distinguish, because what matters is not just how the colours look but whether they can still be told apart.
The colour-vision simulations
- Deuteranopia — a form of red-green colour vision deficiency involving the absence of M-cone response. It can make some red-green distinctions difficult.
- Protanopia — a form of red-green colour vision deficiency involving the absence of L-cone response. Reds can also appear darker.
- Tritanopia — a rarer form of blue-yellow colour vision deficiency involving the absence of S-cone response. Some blue-green and yellow-violet distinctions can become difficult.
- Grayscale — not a colour-blindness simulation, but a useful design stress test. It removes colour information to show whether your palette still works through lightness and contrast alone.
Where the numbers come from
The simulation uses the transformation matrices published by Machado, Oliveira and Fernandes (2009), a widely used physiologically based model for simulating colour vision deficiency. The matrices are applied to linear RGB before the result is converted back to sRGB for display. Applying the transformation directly to gamma-encoded RGB values produces different results and does not follow the linear-RGB workflow used by this implementation.
Differences between colors are measured as CIE76 delta-E in the Lab colour space. In this tool, values under 10 are flagged as very close, while values under 25 are flagged as potentially hard to distinguish. These are design heuristics, not universal perceptual cutoffs. CIE76 is a rough measure; CIEDE2000 generally provides a better fit to perceived differences, particularly for some saturated colors.
What this tool does not do
It models complete dichromacy, where one cone response is absent. Many people with colour vision deficiency have milder forms, such as anomalous trichromacy, which this tool does not model. The simulations should therefore be treated as a severe design stress test rather than a prediction of how every person with colour vision deficiency will see your palette.
It is also not a diagnostic tool. If you want to know about your own colour vision, that is a question for an optometrist, not a web page.
Designing for color vision accessibility
- Never use colour alone to carry meaning. Add an icon, a label, a pattern or a position. Red and green status indicators can be difficult to distinguish for people with some forms of colour vision deficiency; a tick and a cross communicate the same distinction without relying on colour alone.
- Vary lightness, not just hue. Two colors that differ only in hue can become much harder to separate. Adding a meaningful lightness difference can make a palette more robust across different types of colour vision.
- Check contrast separately. Distinguishable is not the same as readable — run text pairings through the contrast checker as well.
- Be careful with red and green together in charts. Blue and orange can provide a useful alternative, but the specific shades still matter. Check your actual palette in the simulator rather than relying on a colour pair alone.
Frequently asked questions
How common is colour blindness?
Colour vision deficiency is common, particularly red-green deficiency in men. The exact prevalence varies by population, and some forms are much more common than others. Deuteranomaly is the most common red-green type.
Which colors should I avoid together?
Red and green are a classic problem, but other combinations can also become difficult depending on the exact shades. Green and brown, blue and purple, and green and grey are examples worth checking. Rather than memorising colour pairs, put your actual colors into the simulator and review the flagged pairs.
Are blue and orange good colors to use together?
Blue and orange can provide useful separation in many designs, but there is no universal pair of colors that is guaranteed to work in every context. The exact shades, lightness, surrounding colors and use of the colors all matter. Check your actual palette and make sure important information is not conveyed by colour alone.
Is this simulation accurate?
It uses the Machado et al. (2009) model, a widely used approach for simulating colour vision deficiency, with the transformation applied in linear RGB as specified by the model. It simulates complete dichromacy, while many forms of colour vision deficiency are milder, so treat the result as a severe stress test rather than a prediction of typical colour perception. It is a design check, not a medical test.