Color Blind Simulator: Why the Red and Green in Your Status Column Read the Same to One Man in Twelve

Test reports run on red, amber and green. I have sat in enough steering committees to know that a status column is read at a glance, and a glance is exactly what fails for about one man in twelve, who cannot tell that red from that green. He nods along with the rest of the room, and the report has told him nothing.

About 8% of men and 0.5% of women have some form of colour vision deficiency. On a page with ten thousand visitors that is several hundred people, and they are not seeing in black and white. Nearly all of them see most colours and lose one distinction: red from green in the common types, blue from yellow in a rare one. Everything that depends on that one distinction, a status dot, an error highlight, a chart legend, goes with it.

This post covers what each type does to a screen, the patterns that fail for them, the palette that does not, and the five-minute test I run before a dashboard or a report template goes anywhere.

Four kinds of colour vision, and what each one loses

The eye has three kinds of colour receptor, for long, medium and short wavelengths, roughly red, green and blue. A deficiency is one of them being weak or missing.

Deuteranomaly and deuteranopia, the green receptor weak or absent. This is the common one, around 6% of men, and it is what people mean by red-green colour blind. Reds, greens, oranges, browns and yellows crowd together. A traffic light is read by position, not colour.

Protanomaly and protanopia, the red receptor weak or absent, around 2% of men. The same red-green confusion, and red also looks darker, so a red warning on a dark background can disappear altogether.

Tritanomaly and tritanopia, the blue receptor affected. Rare, on the order of one in ten thousand, and not tied to the X chromosome, so as common in women as in men. Blue and green merge, and so do yellow and violet.

Achromatopsia, no working colour receptors at all, about one in thirty thousand. Everything is brightness. This is the only type that is the black-and-white picture people imagine when they hear colour blind.

The Color Blindness Simulator takes a screenshot or an image and shows it as each of those four types would see it, side by side, and does the same for a list of hex colours if you want to check a palette rather than a page. It is the fastest way I know to see the problem rather than argue about it.

The patterns that fail, and they are the ones everyone uses

Red, amber, green status. The traffic light is the most common status pattern in software and in every test report I have ever seen, and to the largest group of colour-blind users the three lights are three near-identical dots. Position saves the real traffic light. A status column has no position.

A chart legend that is only colour. Blue for sales, green for marketing, red for support, and for a deuteranope the green and red lines are the same line. Pie charts are worse, because there is not even a line shape to follow.

A form that turns the field red. The border goes from grey to red and nothing else changes. To someone with protanopia the red border is a slightly darker grey border, and the form appears to refuse to submit for no reason.

A green-to-red heat map. The gradient that is supposed to run from good to bad runs, for red-green users, from one muddy tone to a similar muddy tone with no direction to it.

Links marked by colour alone. Blue link text in black body text, no underline. For most readers that is fine; for a tritanope, and for anyone on a poor screen, the links vanish into the paragraph.

None of these are exotic. They are the defaults in most charting libraries and form frameworks, which is why the fix has to be a rule and not a reminder.

One rule covers it: colour is never the only signal

Everything in this section is the same rule applied to a different element. Colour may carry the meaning, as long as something else carries it too.

For status, an icon next to the colour: a tick, a cross, a triangle. Or the word itself. A red dot that says "Failed" beside it works for everyone, and it is what a good test report does anyway, because the steering committee prints it in greyscale.

For charts, a second dimension: solid, dashed and dotted lines; hatched and plain fills; a label at the end of each line rather than a legend in the corner. The chart is then readable in black and white, which is also how it will look in the printed appendix.

For forms, a message. The field border may go red, and next to it is a sentence saying what is wrong and an icon saying that something is.

For links, an underline, or a weight change, or both. Colour on top of that is fine.

And for the colours themselves, choose ones that stay apart under every type of deficiency. Blue and orange is the pairing that survives everything. The Okabe-Ito palette, eight colours chosen in 2008 for exactly this purpose, is the standard answer for categorical data and is built into most charting libraries. Beyond hue, separate colours by lightness: a dark blue and a pale orange stay distinct even for someone who cannot see hue at all, because lightness is what remains. The Color Picker shows HSL for any colour, so you can check that adjacent colours in a set differ in lightness and not only in hue.

The five-step test that fits inside a design review

This takes about five minutes per screen, and it belongs in the review before development starts, not in acceptance testing after.

1. Screenshot the screen and run it through the simulator for all four types. Anything that becomes ambiguous is a finding.

1. Look at the achromatopsia view on its own, because it is the greyscale test. If every distinction that matters survives with no colour at all, the design passes for everyone, whatever their type.

1. Check contrast on the pairs the simulation made you doubt: text on its background, icons on theirs, adjacent chart colours. The Contrast Checker gives the ratio and the pass per WCAG level. Text needs 4.5:1, icons and chart elements 3:1.

1. Read the copy for colour words. "Click the green button" and "fields in red are required" are instructions a colour-blind user cannot follow. Name the button. Mark the required fields with a symbol and say so.

1. If you can, put the screen in front of one person with a deficiency. A simulator shows what the colours become; it does not show how long it takes a real person to work out what the screen wants. One tester finds what no tool does.

Write the five steps into the definition of done for any screen with a status, a chart or a form. A check that lives in a checklist gets done. A check that lives in someone's memory gets done once.

Charts: the three data shapes and the palette for each

Charts are where colour does the most work, so they are where the rule bites hardest. There are three shapes of data and each has a palette that holds up.

Categories, meaning bars, pie slices, separate lines. Keep it to six or seven, use Okabe-Ito or another palette built for deficiency, alternate light and dark so lightness separates neighbours, and label the series on the chart rather than in a legend. A pie chart with more than five slices is a bad chart for everyone; for a colour-blind reader it is a circle.

Sequences, meaning low to high: a heat map, a density map. One hue running from light to dark. Light blue to dark blue is read correctly by every type of vision because it is a lightness scale with a colour on top. Viridis and cividis are the ready-made versions, and cividis was designed so that it reads the same with and without a deficiency. The rainbow scale, and the green-yellow-red scale, are the two to remove from every template you own.

Divergence, meaning a midpoint with two directions: profit and loss, warmer and colder than average. Blue through white to orange. Never green through white to red, for the reason that runs through this whole post.

On screen, add the value and the category to the hover, so that the legend is never the only way to read a point. On paper, add an annotation, a line and a label on the point that matters, because the reader cannot hover and the printer may be black and white.

The three WCAG rules an audit will test, and the laws behind them

Three success criteria in WCAG 2.2 cover everything above, and an audit checks all three.

• 1.4.1 Use of colour, level A: colour is never the only way information, an action or a distinction is conveyed. This is the rule for the status dot, the chart legend and the red form field.
• 1.4.3 Contrast minimum, level AA: text at 4.5:1 against its background, large text at 3:1.
• 1.4.11 Non-text contrast, level AA: icons, borders, focus rings and chart elements at 3:1.

Level A is the floor; a failure at level A is a failure at every level. Note that 1.4.1 is a level A rule. Colour-only status is not a nice-to-have finding.

In the EU, the European Accessibility Act has applied since 28 June 2025 to e-commerce, banking, transport and other consumer services, through a standard that incorporates WCAG 2.1 AA. In the United States, court rulings under the Americans with Disabilities Act have covered public-facing websites for years, and a 2024 rule under Title II puts state and local government sites on WCAG 2.1 AA with deadlines in 2026 and 2027. AA is the target in both places. AAA is worth reaching for body text and not worth promising for a whole product.

FAQ

Do colour-blind people see any colour at all?

Nearly all of them see most colours. What they lose is one distinction, usually red from green, sometimes orange from brown or blue from purple along with it. Seeing only in grey is achromatopsia, about one person in thirty thousand.

Does dark mode help?

Not with colour deficiency as such. The same hues merge on a dark background as on a light one. Dark mode can raise contrast, which helps everyone, and it can also make a red element vanish for someone with protanopia, because red already looks dark to them. Apply the same rules in both modes and simulate both.

What palette is safe?

Blue and orange as the two main colours, black, white and grey as neutrals, and the Okabe-Ito set when you need more categories. Separate neighbouring colours by lightness as well as hue. Then run it through the simulator, because a palette that looks safe on paper can still collapse in one of the four views.

Do I have to give up red and green?

No. Use them, and never alone. Green with a tick and the word passed, red with a cross and the word failed. The colours are fine. Colour as the only signal is the failure.