Good Citizens · Usability Harness · Simulator ·
Colour vision: the same page, seen differently
In a class of thirty children, one or two probably cannot tell some reds from some greens, and many of them will not know it yet.
Beside this is an ordinary shop page. Switch between the kinds of colour vision and watch what happens to the sale price, the stock labels, the error message and the green button.
I · What it is
Three kinds of cone, and what happens when one is different
Most people see colour with three kinds of light-sensing cell, or cone, tuned to long, medium and short wavelengths, roughly red, green and blue.
When one kind is missing or works differently, some colours that look distinct to most people look the same. The common forms affect red and green: protan (the red-sensing cones) and deutan (the green). They come in a milder form, where the cone is shifted, and a full form, where it is missing. Tritan, which affects blue and yellow, is rare, fewer than 1 person in 10,000, and affects men and women equally. Seeing no colour at all, achromatopsia, is rarer still, about 1 in 30,000, and comes with sensitivity to light and poor sharpness.
So the old phrase “colour blind” is misleading. Almost nobody with it sees in black and white. They see a world in which certain pairs of colours, often red and green, or green and brown, collapse into one.
II · Who it affects
One man in twelve, and one woman in two hundred
Red-green colour vision deficiency affects about 1 in 12 men and 1 in 200 women1 of Northern European descent.
It is less common in most other populations: about 4 to 6.5% of Chinese and Japanese men, for example. The genes sit on the X chromosome, which is why it runs through families on the mother’s side and is so much more common in men. A figure of 300 million people worldwide is often quoted, though no single study stands behind it.
In one survey, nearly nine in ten5 people with the full form said colour got in the way of everyday tasks, and up to six in ten had trouble with colour-coded charts. People describe anxious art classes as children, and doors that closed later: “I wanted to be a pilot, but when I failed the colour vision test, I felt like a door had closed,” one told researchers in 20256.
III · How we know
A chemist, a train crash and a book of dots
In 1794 the chemist John Dalton described his own colour vision to a learned society in Manchester.
A green cloth looked to him like “dull, dark, brownish red”, and a laurel leaf matched red sealing wax. He guessed the fluid in his eyes was tinted blue, and asked that they be examined after he died. They were clear. His eye was kept, and in 1995 scientists read its DNA and found he had been green-blind7, not red-blind as everyone had assumed for 150 years.
In 1875 two trains collided at Lagerlunda in Sweden and nine people died. A professor, Frithiof Holmgren, blamed colour blindness and used the disaster, with what two historians call “some unashamed subterfuge”8, to win colour testing for every railway worker. The crash itself probably had other causes. In 1917 the Japanese ophthalmologist Shinobu Ishihara published his plates of coloured dots, still the best-known test today.
IV · About the simulation
What a simulator can and cannot show
A simulation shows which colours get confused. It does not show what anyone actually experiences.
Ours uses colour matrices of the kind published by Machado, Oliveira and Fernandes9 in 2009, which build on work by Brettel, Viénot and Mollon in 1997. They show the full forms; most people have a milder one, and colour vision also changes with lighting and with age. Use it to find the places where your design leans on colour alone, then check with people who see this way.
V · What to do
What it means for your design
- 01
Never let colour work alone
Pair every colour with something that says the same thing: a word (“sold out”), an icon, a pattern or a position. This is the first rule of colour in the Web Content Accessibility Guidelines, 1.4.1 Use of Color11.
- 02
Give shapes enough contrast
Buttons, form borders and the parts of a chart people need to understand should have a contrast of at least 3 to 1 against what is next to them (WCAG 1.4.11).
- 03
Choose a palette made for it
The Okabe–Ito palette was designed by two scientists, both strongly red-blind, so that its colours stay distinct for almost everyone. Avoid red and green as the pair for bad and good.
- 04
Label chart lines directly
A legend that is only colour asks the reader to match colours across the page. Put the name at the end of each line instead.
- 05
Say the colour’s name
If people might need to talk about it, such as “the red cable” or “the green plan”, write the name in the interface too.
- 06
Simulate, then ask
Run your pages through a simulator to find the problems, then test with people who see differently. A simulation is a check, not proof.
VI · Prototypes
Works on prototypes as they are
This tool changes the pixels you see, so it works on anything in a browser: a live site, a Figma prototype link, a Penpot or Sketch prototype, a Storybook story or a generated app.
Open the prototype, click the bookmark, and click through it. The earlier you catch a problem, the cheaper it is to fix.
VII · Myths
What people get wrong
- Colour-blind people see in black and white
- Almost none do. Seeing no colour at all affects about 1 person in 30,000. Most people confuse particular pairs of colours.
- One man in twelve, everywhere
- That figure is for people of Northern European descent. It is lower in most other populations.
- A colour-blind driver caused the Lagerlunda crash
- The historians who studied it most closely conclude it cannot be put down to colour blindness alone.
- A simulator shows exactly what people see
- It shows which colours collapse together, for the full form of each type. Real colour vision varies from person to person.
Click it on any page to see it red-blind. Click again for green-blind, then blue-blind, then with no colour at all, and once more to switch it off. A small label in the corner says which you are seeing.
Works in Chrome, Safari, Firefox and Edge on a computer.
Or all 10 at once
Download the bookmarks fileOne Good Citizens folder with every tool in it. Download it, then import it:
- Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
- Safari: File › Import From › Bookmarks HTML File
- Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML
Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.
More tools: Fovea · Ageing eyes · Shaky hand · all 10
VIII · Sources
The research behind this page
Every figure above comes from one of these 12 sources. The small numbers in the text point here, and each source points back.
Reference
Color vision deficiencyNational Library of Medicine
Reference
AchromatopsiaNational Library of Medicine
Reference
Color blindnessPeer-reviewed study
Worldwide prevalence of red-green color deficiency·
Journal of the Optical Society of America A
Peer-reviewed study
The handicap of abnormal colour vision·
Clinical and Experimental Optometry
Review
A global perspective of color vision deficiency: awareness, diagnosis, and lived experiences·
Healthcare
Article
John Dalton and colour blindnessPeer-reviewed study
The Lagerlunda collision and the introduction of color vision testing·
Survey of Ophthalmology
Peer-reviewed study
A physiologically-based model for simulation of color vision deficiency·
IEEE Transactions on Visualization and Computer Graphics
Peer-reviewed study
Computerized simulation of color appearance for dichromats·
Journal of the Optical Society of America A
Standard
Understanding WCAG 1.4.1: Use of ColorWeb Content Accessibility Guidelines 2.2
Guidance
Color Universal Design: how to make figures and presentations that are friendly to colorblind people