Colour Blindness: When Colour Is the Only Signal

About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. The most common types make red and green hard to tell apart. Every example on this page uses colour, and only colour, to carry meaning. Work through it once normally, then again with a protanopia filter switched on.

Text

1. Stock list

Task: which products are out of stock?

Products shown in red are out of stock. Products in green are available to order.

USB-C cable 1m
Wireless mouse
HDMI adapter
Laptop stand
Mechanical keyboard
Webcam 1080p
Noise-cancelling headset
Desk lamp

Out of stock: Wireless mouse, Mechanical keyboard, Noise-cancelling headset.
The legend sentence doesn't help either. The words "red" and "green" are themselves coloured, so they look the same.

Status indicators

2. Server dashboard

Task: which servers are down?

web-01

web-02

web-03

api-01

api-02

db-01

db-02

cache-01

Up Degraded Down

Down: web-03 and db-02. Degraded: api-02.

Data table

3. Department budget variance

Task: which departments are over budget?

Department	Budget (€)	Actual (€)	Variance (€)
Engineering	420,000	398,500	21,500
Marketing	150,000	171,200	21,200
Sales	210,000	204,900	5,100
Support	95,000	99,800	4,800
HR	60,000	52,300	7,700
Facilities	130,000	142,600	12,600

Variance in green = under budget, red = over budget.

Over budget: Marketing, Support and Facilities.
The variance column has no +/− sign, so colour is the only cue. You could work it out from the other two columns, but that is exactly the effort the colour was meant to save.

Heatmap

4. Project RAG status report

Task: which project turned red in week 4, and which project was green every week?

On track At risk Off track

Turned red in week 4: Mobile App. Green every week: Data Warehouse.

Form validation

5. Sign-up form

Task: which fields must you fix before you can submit?

Full name

Phone

Password

Confirm password

Email (missing domain suffix) and Password (too short).
There are no error messages, only red borders.

Line chart

6. Revenue vs costs, 2025

Task: which line is Revenue? Did Revenue finish the year above or below Costs?

Green is Revenue. It started below Costs, crossed over in June, and finished the year above them (about €130k against €100k).

Pie chart

7. Sales by region

Task: which region has the largest share of sales? Which has the smallest?

South West North East

Largest: North (red, 35%). Then South (green, 25%), East (amber, 22%) and West (brown, 18%), the smallest.
The legend is deliberately in a different order from the slices, so you can only match them by colour.

Diagram

8. CI/CD pipeline run #482

Task: which stage failed, and which stages never ran because of it?

Passed Failed Skipped

Lint failed. Integration tests and Deploy prod were skipped. Everything else passed.

The fix

Use colour, but never colour alone

Here is the server dashboard from demo 2 again. It uses the same colours, plus an icon and a text label. Check it with the filter on:

✓web-01 · Up

✓web-02 · Up

✗web-03 · Down

✓api-01 · Up

!api-02 · Degraded

✓db-01 · Up

✗db-02 · Down

✓cache-01 · Up

Ways to fix each of the earlier demos:

Text and lists: add a word or symbol, such as "(out of stock)" or a strikethrough.
Status indicators: use different shapes or icons (✓ ✗ !) and a text label.
Numbers: show the sign (+/−), or label the column "Over / under".
Heatmaps: print the letter (R / A / G) or a short word inside each cell.
Forms: show an error message next to the field and an error icon, and set aria-invalid.
Line charts: label each line directly at its end, and use different dash patterns or markers.
Pie and bar charts: label the slices directly, keep the legend in the same order as the data, and use colours that differ in lightness, not just hue.
Diagrams: add status icons or text, and use dashed outlines for skipped steps.
Palettes: where the hue really matters, use a colour-blind-safe palette such as blue/orange instead of red/green.