Human Factors · Simulator ·

Color vision

About one man in twelve of Northern European descent confuses some reds and 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.

400500600700wavelength, nmS blueM greenL redL slides to Mred and green merge
Three kinds of cone. When the red-sensing curve shifts toward the green, as in protan vision, two colors become one.
Corner BakeryMenu · Hours · Help

Sourdough loaf

$6.50 $8.00

● In stock ● Rye: sold out

That email address is missing its ending.

details

Why should I care?

If red and green alone say stop and go on your page, about one man in twelve can’t tell which is which.

  • 1 in 12men of Northern European descent.
  • 1 in 200women of the same descent.
  • 1 or 2children in a class of thirty.
1 a 12 in orange, on green2 the filter: green-blind1 in 12 men1 in 200 women
Under the filter, the plate as green-blind eyes see it: the 12 is gone. Simulated with Machado, Oliveira and Fernandes (2009).

What to do on your website

  1. Never let color work alone: add a word.
  2. Don’t pair red and green for bad and good.
  3. Label chart lines by name, not just color.

More, if you want it

Check your own website with this tool
🎨 Color vision

This is the button you’ll drag.

  1. 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.
  2. Drag the Color vision button up into that bar and let go.
  3. 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 have no bookmarks bar, so there are three other ways below.

On a phone or tablet

iPhone or iPad, from the Share button
  1. Copy the tool:
  2. Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
  3. In the shortcut’s details, turn on Show in Share Sheet, and name it Color vision.
  4. Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
  5. On your website in Safari, tap Share, then Color vision.
Android, from Chrome’s address bar
  1. Copy the tool:
  2. Bookmark any page with the star, then edit that bookmark: name it gc color vision and paste the tool in as its address.
  3. On your website, type gc color vision in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer

Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.

Email me the link

Get all 10 tools in one go

One Good Citizens folder with every tool in it. Download the file, then import it into your browser from the menu below:

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.

Holmgren’s wools, after 1875matches for greenthe test greenDalton’s eyeread 1995: green-blind
Holmgren’s wools, used to test railway workers after 1875: a green-blind eye takes a brown for a green. Dalton’s own eye, kept in a jar, was read in 1995.
What a simulator can and cannot show

A simulation shows which colors get confused. It does not show what anyone actually experiences.

Ours recolors the page with formulas, called 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.

deutan matrix0.370.86-0.230.280.670.05-0.010.040.97inoutred and green come out almost alike
The simulation is one sum per pixel: a three-by-three grid of numbers, here green-blindness, applied to every color on the page.
All the advice, in full
  1. BEFOREAFTERSold outIn stock

    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.

  2. BEFOREAFTER

    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).

  3. OKABE–ITOnot red with green

    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.

  4. BEFOREAFTERrentfoodfuel

    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.

  5. redgreen

    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.

  6. SIMULATETHEN ASK

    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.

  1. Reference

    Color vision deficiency

    MedlinePlus Genetics

    National Library of Medicine

    medlineplus.gov · cited in II

  2. Reference

    Achromatopsia

    MedlinePlus Genetics

    National Library of Medicine

    medlineplus.gov

  3. Reference

    Color blindness

    National Eye Institute

    nei.nih.gov

  4. Peer-reviewed study

    Worldwide prevalence of red-green color deficiency

    Birch ·

    Journal of the Optical Society of America A

    researchgate.net

  5. Peer-reviewed study

    The handicap of abnormal colour vision

    Cole ·

    Clinical and Experimental Optometry

    researchgate.net · cited in II

  6. Review

    A global perspective of color vision deficiency: awareness, diagnosis, and lived experiences

    Almustanyir ·

    Healthcare

    pmc.ncbi.nlm.nih.gov · cited in II

  7. Article

    John Dalton and colour blindness

    Science and Industry Museum

    blog.scienceandindustrymuseum.org.uk · cited in III

  8. Peer-reviewed study

    The Lagerlunda collision and the introduction of color vision testing

    Mollon and Cavonius ·

    Survey of Ophthalmology

    vision.psychol.cam.ac.uk · cited in III

  9. Peer-reviewed study

    A physiologically-based model for simulation of color vision deficiency

    Machado, Oliveira and Fernandes ·

    IEEE Transactions on Visualization and Computer Graphics

    inf.ufrgs.br · cited in IV

  10. Peer-reviewed study

    Computerized simulation of color appearance for dichromats

    Brettel, Viénot and Mollon ·

    Journal of the Optical Society of America A

    opg.optica.org

  11. Standard

    Understanding WCAG 1.4.1: Use of Color

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org · cited in V

  12. Guidance

    Color Universal Design: how to make figures and presentations that are friendly to colorblind people

    Okabe and Ito

    jfly.uni-koeln.de