Who’s afraid of red, orange and green?
Tips and tools for colour-blind-friendly design
Colour blindness – or more properly called: colour vision deficiency (CVD) – affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) in the world. In the USA, this means that there are approximately 14.2 million colour-blind people, most of whom are male. They see colours differently, something to take into account, for instance, when designing data visualisations.
What causes colour blindness?
Colour blindness occurs when light-sensitive cells in the retina don’t respond properly to variations in wavelengths of light that enable us to see a full spectrum of colours.
Photoreceptors in the retina are called rods and cones. Rods are more plentiful (there are approximately 100 million rods in the human retina) and they are more sensitive to light, but rods are incapable of perceiving colour.
The 6 to 7 million cones in the human retina are responsible for colour vision, and these photoreceptors are concentrated in the heart of the retina called the macula. The center of the macula is called the fovea, and this tiny (0.3 mm diameter) area contains the highest concentration of cones in the retina. It is responsible for our most acute colour vision.
Inherited forms of colour blindness often are related to deficiencies in certain types of cones or a total absence of these cones. For the vast majority of people with deficient colour vision, the condition is genetic and has been inherited from their mothers. Some people become colour-blind as a result of diseases such as diabetes or multiple sclerosis or they acquire the condition over time, due to the aging process or medications, etc.
Three types of colour blindness
Red-green colour blindness
The most common types of hereditary colour blindness are due to the loss or limited function of red cone (known as protan) or green cone (deutran) photopigments. This kind of colour blindness is commonly referred to as red-green colour blindness.
- Protanomaly: In males with protanomaly, the red cone photopigment is abnormal. Red, orange, and yellow appear greener and colours are not as bright. This condition is mild and doesn’t usually interfere with daily living. Protanomaly is an X-linked disorder estimated to affect 1% of males.
- Protanopia: In males with protanopia, there are no working red cone cells. Red appears as black. Certain shades of orange, yellow, and green all appear as yellow. Protanopia is an X-linked disorder that is estimated to affect 1% of males.
- Deuteranomaly: In males with deuteranomaly, the green cone photopigment is abnormal. Yellow and green appear redder and it is difficult to tell violet from blue. This condition is mild and doesn’t interfere with daily living. Deuteranomaly is the most common form of colour blindness and is an X-linked disorder affecting 5% of males.
- Deuteranopia: In males with deuteranopia, there are no working green cone cells. They tend to see reds as brownish-yellow and greens as beige. Deuteranopia is an X-linked disorder that affects about 1% of males.
Blue-yellow colour blindness
Blue-yellow colour blindness is rarer than red-green colour blindness. Blue-cone (tritan) photopigments are either missing or have limited function.
- Tritanomaly: People with tritanomaly have functionally limited blue cone cells. Blue appears greener and it can be difficult to tell yellow and red from pink. Tritanomaly is extremely rare. It is a disorder affecting males and females equally.
- Tritanopia: People with tritanopia, also known as blue-yellow colour blindness, lack blue cone cells. Blue appears green and yellow appears violet or light grey. Tritanopia is an extremely rare disorder affecting males and females equally.
Complete colour blindness
People with complete colour blindness (monochromacy) don’t experience color at all and the clearness of their vision (visual acuity) may also be affected.
There are two types of monochromacy:
- Cone monochromacy: This rare form of colour blindness results from a failure of two of the three cone cell photopigments to work. There is red cone monochromacy, green cone monochromacy, and blue cone monochromacy. People with cone monochromacy have trouble distinguishing colours because the brain needs to compare the signals from different types of cones in order to see colour. When only one type of cone works, this comparison isn’t possible.
- Rod monochromacy or achromatopsia: This type of monochromacy is very rare and is the most severe form of colour blindness. It is present at birth. None of the cone cells have functional photopigments. Lacking all cone vision, people with rod monochromacy see the world in black, white, and grays. And since rods respond to dim light, people with rod monochromacy tend to be photophobic – very uncomfortable in bright environments.
What to avoid when using colours side by side?
Based on the types of colour blindness listed above, there are specific colour combinations you should avoid, especially when these colours display values like in charts, graphs, and maps. Green and red or light green and orange with similar grey values will blend into each other for people with red-green colour blindness when used side by side. And even when they are not side by side, they may lead to confusion when there are more than 4 colours in use.
Colour checking tools
If you want to create a quick preview of your work to judge whether colour-blind people will have difficulties reading or understanding it, there are some handy tools out there. A tool we often use at JustEdo is Color Oracle, a free colour blindness simulator for Windows, MacOSX and Linux. It takes the guesswork out of designing for colour blindness by showing you in real time what people with common colour vision impairments (Deuteranopia, Protanopia, and Tritanopia) will see.
In Figma – our favourite digital design tool – you can simulate how colour-blind people will see your design by running one of the color blindness plugins available. In Adobe apps like Illustrator and Photoshop, you can select a proof setup for the most common types of colour blindness to preview your design.