Color vision
Many people can’t tell some reds from some greens.
Try it here
Pick a kind of color vision under the shop page. Watch what happens to the sale price, the stock labels and the green button.
Who this is
- 1 in 12men of Northern European descent.
- 1 in 200women of the same descent.
- 1 or 2children in a class of thirty.
What to do on your website
- Never let color work alone: add a word.
- Don’t pair red and green for bad and good.
- Label chart lines by name, not just color.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Color vision button up into that bar and let go.
- Open your own website and click Color vision in the bar. Click it on any page to see it red-blind. Click again for green-blind, then blue-blind, then with no color at all, and once more to switch it off. A small label in the corner says which you are seeing.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets aren’t set up for it.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- 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
More free tools: Fovea, Aging eyes, Shaky hand, or all 10.
Why this matters
Picture a customer who can’t tell your red “sold out” from your green “in stock”. 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 color vision and watch what happens to the sale price, the stock labels, the error message and the green button, the very parts of a page that make a sale.
What happens when one kind of cone differs
Most people see color with three kinds of light-sensing cell in the eye, called cones, tuned to long, medium and short wavelengths of light, roughly red, green and blue.
When one kind is missing or works differently, some colors 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 color at all, achromatopsia, is rarer still, about 1 in 30,000, and comes with sensitivity to light and poor sharpness.
So the old phrase “color blind” is misleading. Almost nobody with it sees in black and white. They see a world in which certain pairs of colors, often red and green, or green and brown, collapse into one. A sign that speaks only in those colors is a sign with no words on it.
1 in 12 men, 1 in 200 women
Red-green color 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 color got in the way of everyday tasks, and up to six in ten had trouble with color-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 color vision test, I felt like a door had closed,” one told researchers in 20256.
Dalton, a train crash and Ishihara’s dots
In 1794 the chemist John Dalton described his own color 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 color blindness and used the disaster, with what two historians call “some unashamed subterfuge”8, to win color testing for every railway worker. The crash itself probably had other causes. In 1917 the Japanese ophthalmologist Shinobu Ishihara published his plates of colored dots, still the best-known test today.
What a simulator can and cannot show
A simulation shows which colors get confused. It does not show what anyone actually experiences.
Ours uses color 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 color vision also changes with lighting and with age. Use it to find the signs on your page that have no words, only color, then check with people who see this way.
All the advice, in full
Never let color work alone
Pair every color with something that says the same thing: a word (“sold out”), an icon, a pattern or a position. This is the first rule of color in the Web Content Accessibility Guidelines, 1.4.1 Use of Color11.
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).
Choose a palette made for it
The Okabe–Ito palette was designed by two scientists, both strongly red-blind, so that its colors stay distinct for almost everyone. Avoid red and green as the pair for bad and good.
Label chart lines directly
A legend that is only color asks the reader to match colors across the page. Put the name at the end of each line instead.
Say the color’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.
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.
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.
What people get wrong
- Color-blind people see in black and white
- Almost none do. Seeing no color at all affects about 1 person in 30,000. Most people confuse particular pairs of colors.
- One man in twelve, everywhere
- That figure is for people of Northern European descent. It is lower in most other populations.
- A color-blind driver caused the Lagerlunda crash
- The historians who studied it most closely conclude it cannot be put down to color blindness alone.
- A simulator shows exactly what people see
- It shows which colors collapse together, for the full form of each type. Real color vision varies from person to person.
Where these numbers come from
Every figure on this page comes from one of these 12 sources. The small numbers in the text point here.
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