Free tools · Simulator ·

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.

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

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

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

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