E-Tabs

Data Viz for the Visually Impaired – Part 2: Colour Blindness

Following from our previous blog post on how to design visualisation for the visually impaired, we now turn our attention to how best to accommodate colour blind viewers.

As many as eight percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green colour blindness.

Men are much more likely to be colour blind than women because the genes responsible for the most common, inherited colour blindness are on the X chromosome. Males only have one X chromosome, while females have two X chromosomes. In females, a functional gene on only one of the X chromosomes is enough to compensate for the loss on the other.

As mentioned in the previous blog post although these may seem like small percentages, when publishing in a mass market, these percentages can add up to a large number.  Even when publishing for a small group of stakeholders for example, it is possible that a number of critical people will have difficulty with your visualisations should you fail to take their impaired vision into account at the design stage.

Although the techniques for designing for the colour blind do not provide much extra benefit for those who are not, there are still some benefits in not relying solely on colour differences to communicate your message. It is difficult to predict which colours will actually display on different monitors and devices or be produced by different printers and, by not relying on colour alone, your visualisations will be unambiguous.

There are many different forms of colour blindness, but the most common one is red-green colour blindness or deuteranopia. This is where sufferers mix up red and green, or any colours containing red or green, for example purple as it is made from a combination of blue and red. Unfortunately, market research visualisations often make extensive use of reds and greens.

Colourblind image 1

 

This pie chart shows how a red/green pie chart might look to someone who is colour blind. Alright, maybe we exaggerated a bit, but not by very much! The chart is not very helpful as you may notice. The legend demonstrates how even someone who is not colour blind might struggle to read something with insufficient contrast between the colours. And ‘struggle’ includes the reader taking a few extra seconds to process the text, leading you to lose their attention.

The good news is that making visualisations accessible to colour blind users does not mean returning to black and white. Colour blindness is not a total loss of colour vision. Colour blind people can recognize a wide range of colours, but certain ranges of colours are hard for them to distinguish. The important point to understand is that the ‘true’ colour of something is irrelevant but the fact that it is different from its surroundings is very important. One person might see the pie chart as blue and pink, another may see it as green and orange, but the message will still get through. The problem only occurs when one person sees it as red and green and the other sees it as brown and brown. This image demonstrates this:

Colourblind image 2

There are two main approaches to be used to deal with this. First is to pick colour combinations that are compatible with colour blind people’s colour perception range. There are many tools online which can help you with this. Color Oracle have a great program that you can download which will show anything on your screen as a colour blind user would see it.

The second approach is aptly put in the WCAG 2.0 recomendations; “Colour is not used as the only visual means of conveying information“. Although you may have a key to explain what each line in your chart represents, it is useless if all the lines appear to be the same colour!

Use shaped markers to differentiate between your lines, or use different line styles. Instead of a red or green circle to indicate change, use up and down arrows. You can have a green up arrow, and a red down arrow for the benefit of your non colour blind users, but the shape allows the information to be conveyed by means other than colour. You may also want to add labels to your charts wherever possible.

When designing to accommodate colour blind users, care must be taken not to alienate those users who are not colour blind. For example, you may think that using cross-hatching instead of colours in your bar charts will allow colour blind users to easily differentiate between the different measures. However, this will annoy everybody else as cross-hatching looks ugly and almost anybody would prefer solid colours. You may want to add labels to all the lines in your line charts, but end up with a chart that is too cluttered with text to be functional.

hatched bar (3)

 

A balance needs to be reached between being colour blind friendly and having a good and useful visualisation. If it is an interactive visualisation, the labels could be toggled on and off as necessary, or tooltips could be used to provide the non-colour information in an unobtrusive manner. If it is not interactive, you don’t have these options, but it is still important to use non-obtrusive solutions to present your non-colour information.

Once you are aware of the issues involved, there are many resources available online to help you make your visualisations available to as many people as possible.

Guidelines for use of colours in designing for the colour blind

http://mkweb.bcgsc.ca/colorblind/

http://www.improving-visualisation.org/case-studies/id=7#jump_10

http://colororacle.org/resources/2007_JennyKelso_DesigningMapsForTheColourVisionImpaired.pdf

https://msdn.microsoft.com/en-us/library/bb263953(v=vs.85).aspx

http://jfly.iam.u-tokyo.ac.jp/color/

http://colororacle.org/resources/2007_JennyKelso_ColorDesign_lores.pdf

https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/

 

Tools to simulate how a colour blind person would see your image

http://colororacle.org

http://www.color-blindness.com/coblis-color-blindness-simulator/

 

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *