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.

Corner BakeryMenu · Hours · Help

Sourdough loaf

$6.50 $8.00

● In stock ● Rye: sold out

That email address is missing its ending.

details

I · What it is

Three kinds of cone, and what happens when one is different

400500600700wavelength, nmSMLL slides to Mred and green merge
Three kinds of cone. When the red-sensing curve shifts towards the green, as in protan vision, two colours become one.

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

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

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

matches for greenthe test greenDalton’s eyegreen-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.

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

0.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 colour on the page.

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

  1. Sold outIn stock
    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.

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

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

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

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

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

live siteFigma prototypeStorybook story

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.

Take it to any website

🎨 Colour vision

↑ Drag it to your bookmarks bar

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.

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

  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