Designing for color blindness

Cover Image

One of the most common questions asked in making a site accessible is to How do I design for the colorblind users? First off, before designing for colorblind we have to understand what is how our eye works and what is the reason causing the colorblindness. Let’s jump right in,

Color blindness is not "color blindness"!

There are still a lot of people who think that if you are colorblind you really can’t see any colors. But the term is misleading, as more than 99% of all colorblind people can see colors. A better wording would be color vision deficiency, which describes this visual disorder more precisely.

So what actually is color vision deficiency? In simpler words, if you are suffering from a color vision deficiency you perceive a narrower color spectrum compared to somebody with normal color vision.

Color perception build up by three different types of cones. Each type is sensitive to a certain wavelength of light (red, green, blue). Every perceived color is therefore a mixture of stimuli of those three cone types.

So why is this important? Approximately 8% of all men and 0.5% of all women worldwide are affected by color vision deficiency.

Understanding vision deficiency

Let’s look at a human eye and understand what it is constructed of, we all know retina is responsible for our vision and the retina is built with a number of atomic cells called cones and rods. Cone cells, or cones, are photoreceptor cells in the retinas of vertebrate eyes that will they respond differently to light of different wavelengths, and are thus responsible for color vision and function best in relatively bright light, as opposed to rod cells, which are responsible for seeing in dim light.

Cones contain one of three different photopigments. This makes cones sensitive to long (red), medium (green), or short (blue) wavelengths of light. The presence of three types of photopigments, each sensitive to a different part of the visual spectrum, is what gives us our rich color vision. Humans are unusual among mammals for our trichromatic vision – named for the three different types of photopigments we have. Here are the three types of cones responsive to different wavelengths,

Img

  • S-cones: sensitive to short wavelength light with a peak at ca. 420nm • Blue (tritan)
  • M-cones: sensitive to medium wavelength light, peak at ca. 530nm • Green (detuan)
  • L-cones: sensitive to long wavelength light with a peak at ca. 560nm • Red (protan)



So when one or more types of these cones are missing/defective the vision deficiency occurs and can see fewer or no colors. There are 3 types of vision deficiency,

Monochromatism Either no cones available or just one type of them.

Dichromatism (Anopia) Only two different cone types. Third one is missing completely.

Anomalous trichromatism (Anomaly) All three types exists but with shifted peaks of sensitivity for one of them, which results in a smaller color spectrum.

Based on the cone type missing or defective, there are many types of colorblindness, for e.g, if a person is missing (anopia) red cones (protan) its called Proto-anopia, if they have malfunctioned (anomaly) red cones(protan) its called Proto-anomaly, similar for all the other 2 cone types.

And below image shows how different wavelengths are missing or disoriented from the normal cone curves,

Image showing the different wavelengths

here is what different colorblind people see from the original colors,

Not all colorblindness common, share of different type of colorblind humans worldwide and it looks like below,

Anopia (missing) Anomaly (malfunctioning) Monochromacy
🧔🏽 👩🏼‍🦰 🧔🏽 👩🏼‍🦰 🧔🏽 👩🏼‍🦰
Protan (red) Protanopia 1.01% 0.02% Protanomaly 1.08% 0.03% Achromatopsia 0.00003%
Detuan (green) Deuteranopia 1.27% 0.01% Deuteranomaly 4.63% 0.36%
Tritan (blue) Tritanopia 0.0001% Tritanomaly 0.0002%

How do I Design?

Designing for red/green

  • Don’t just rely on color to differentiate between data.
  • Use some kind of additional indicator to show the difference. E.g Icon, +ve -ve signs, fill patterns

When using conditional formatting in tables don't just rely on red & green, add an additional indicator like an icon here shown below.

👎🏽Dont.
👍🏽Do.

Similarly when showing a scorecard, don't just rely on the color alone, use an additional indicator to denote the special situation

👎🏽Dont.
👍🏽Do.

When designing form validations make sure you are not just relying on color alone to convey the message; e.g like below take a simple form when the user submits an incomplete while the text itself is enough its better to mix the message with an icon giving stronger indication focus.

👎🏽Dont.
👍🏽Do.

Designing color blind friendly charts

Leverage dark and light when necessary

Sometimes your chart design will require a combination that is considered unsuitable for those who are color blind. In cases where you must use combinations like red and green, it’s highly recommended that you leverage a dark vs. light combination.

👎🏽Dont.
👍🏽Do.

Alternatives for distinguishing information.

Think of alternatives to color, like fill patterns and symbols to indicate different colors.

👎🏽Dont.
👍🏽Do.

also try to avoiding bad color combos

  • Green & Red
  • Green & Brown
  • Blue & Purple
  • Green & Blue
  • Light Green & Yellow
  • Blue & Grey
  • Green & Grey
  • Green & Black

Use a colorblind friendly color palette

By using a colorblind-safe color palette, you are making sure that everyone can capture the differences and meanings of the information presented in the chart, as well as easily remember things you have put focus on.

The following are some colorblind-safe color palette

#f7fcfd
#e5f5f9
#ccece6
#99d8c9
#66c2a4
#41ae76
#238b45
#006d2c
#00441b
#f7fcfd
#e0ecf4
#bfd3e6
#9ebcda
#8c96c6
#8c6bb1
#88419d
#810f7c
#4d004b
#f7fcf0
#e0f3db
#ccebc5
#a8ddb5
#7bccc4
#4eb3d3
#2b8cbe
#0868ac
#084081
#fff7ec
#fee8c8
#fdd49e
#fdbb84
#fc8d59
#ef6548
#d7301f
#b30000
#7f0000
#fff7fb
#ece7f2
#d0d1e6
#a6bddb
#74a9cf
#3690c0
#0570b0
#045a8d
#023858
#fff7fb
#ece2f0
#d0d1e6
#a6bddb
#67a9cf
#3690c0
#02818a
#016c59
#014636
#f7f4f9
#e7e1ef
#d4b9da
#c994c7
#df65b0
#e7298a
#ce1256
#980043
#67001f
#fff7f3
#fde0dd
#fcc5c0
#fa9fb5
#f768a1
#dd3497
#ae017e
#7a0177
#49006a
#ffffe5
#f7fcb9
#d9f0a3
#addd8e
#78c679
#41ab5d
#238443
#006837
#004529
#ffffd9
#edf8b1
#c7e9b4
#7fcdbb
#41b6c4
#1d91c0
#225ea8
#253494
#081d58
#ffffe5
#fff7bc
#fee391
#fec44f
#fe9929
#ec7014
#cc4c02
#993404
#662506
#ffffcc
#ffeda0
#fed976
#feb24c
#fd8d3c
#fc4e2a
#e31a1c
#bd0026
#800026
#f7fbff
#deebf7
#c6dbef
#9ecae1
#6baed6
#4292c6
#2171b5
#08519c
#08306b
#ffffff
#f0f0f0
#d9d9d9
#bdbdbd
#969696
#737373
#525252
#252525
#000000
#f7fcf5
#e5f5e0
#c7e9c0
#a1d99b
#74c476
#41ab5d
#238b45
#006d2c
#00441b
#fcfbfd
#efedf5
#dadaeb
#bcbddc
#9e9ac8
#807dba
#6a51a3
#54278f
#3f007d
#fff5f0
#fee0d2
#fcbba1
#fc9272
#fb6a4a
#ef3b2c
#cb181d
#a50f15
#67000d
#fff5eb
#fee6ce
#fdd0a2
#fdae6b
#fd8d3c
#f16913
#d94801
#a63603
#7f2704

To learn more visit https://colorbrewer2.org

Label information when necessary

Clearly label the information when necessary, this helps to avoid confusion.

Provide a fallback

If any of the above steps won’t optimize the graph, then provide a fallback of the data in a tabular or a readable format. Like shown in the below chart provide an option to toggle to the raw data view.

Smoking is more prevalent in Europe
Map showing smoking

What software should I use?

It is important that we test our designs beforehand, but there might not be always a colorblind person accessible to help you in testing your designs. Thanks to technology, there are some softwares that can simulate different type of colorblindness, the best one out of all is Sim Daltonism, a tiny MacOS only app that let's check your designs and websites with easy. There are other software but I recommend using Sim Daltonism.

Screenshot of Sim Daltonism software

References

If you like the post or have a suggestion? Please leave a comment below and also don't forget to follow me on twitter @websiddu

 Share   
Last Updated: 7/13/2019, 3:04:22 PM
Siddhartha Gudipati
I'm Sid, a designer. I write about my random thoughts, some tech, ux and also post pictures I clicked with my Sony a7iii. If you enjoy content follow me on twitter.