Tag Archives: colour blidness

Embrace diversity – how to design data visualizations for people with visual impairments.

Have you ever thought that it is possible to discriminate people through data visualization design? Several years ago, it sounded strange to me too, but indeed, it can be done unconsciously if you are not aware of the topic.

Discrimination is most often associated with skin colour, gender, age, religious beliefs, or nationality. However, this negative social phenomenon can have much broader spectrum. One of them, not at all intuitive, is data visualizations practices. The topic is gaining importance as more and more data is used to explain global processes, and those with difficulties in that area are being left behind. It may not be simple, but the onus is on data community and data visualization practitioners to develop new best practices to communicate data in more democratic way with those with difficulties in this area in mind.

To make data visualization more accessible to a wider audience, three dimensions can be improved: vision, cognitive and learning difficulties, and motor capabilities. The basic, obvious difficulty is related with vision impairments; but the degree of impairment is key. I will not discuss the most severe degree, which is blindness (this is a topic for different post), but I will bring closer the subject of colour-blindness and low vision impairments.

COLOUR BLINDNESS

In data visualization, colour is the most important communication channel. The ability to see and understand the meaning of colours helped our ancestors to survive in deep jungles or on savannas. Colour informed them about non-toxic food or allowed them to spot predators in the forest.

Today, we are still sensitive to colours and these naturals reactions are used in many ways. For instance, most warning signals use red colour, because we naturally associate it with danger or action (red is a colour of the blood)[1]. Studies show that prolonged exposure to the red colour can cause the heart rate to accelerate as a result of activating the “fight or flight” instinct[2]. In opposite, blue colour has a calming effect.

However, not everyone can see colours. Approximately about 10% of human population has trouble seeing colours correctly. If you would like to deepen your knowledge about types of colour-blindness, please check the website. There you can learn about causes of colour-blindness, test yourself, and find a tool to check if prepared visualization is in line with best practices.

There are several basic principles that improve your colour palette and enable visualization for broader audience. To understand them we need to understand two important colour properties:  hue, and saturation. Hue defines colour in terms of pink, blue, yellow, or magenta. Saturation is nothing more than volume of the colour. By juggling these main properties we can improve or worsen results of our work.

RED-GREEN

First of all, stop using red-green palette which is confusing or even unrecognizable to colour-blinded people. This is my humble recommendation. For most people with colour difficulties this red and green colour look the same (see Picture 1).

Picture 1

Most modern data visualization tools, such as Tableau or Power BI already have available colour palettes that handle with the topic. Both mentioned tools have also option to create custom compositions and upload them to the application (custom colour palettes for Tableau and Power BI).

If you are wondering about the right colour palettes, check out the ones presented on Picture 2 and Picture 3. They are nice, clean, and fancy and will work for any reports.

Picture 2 – Vivid & Energetic
Picture 3 – Elegant & Sophisticated

CONFUSING COLOUR PAIRS

Even though we try to avoid the red-green colour range there are still other pairs that resulted in similar way. In recent years I have been observing the dizzying career of the grey-blue duet. I like this combination as well, however, it is essential to match them wisely (see Picture 4).

Picture 4

MONOCHROMATIC SCALE

Sometimes the best option is to simply stick with one colour and play with its saturation to differentiate specific categories or data ranges (see Picture 5). This approach can be used in most visualizations.

Picture 5

More practical colour ranges you can find here, and if you would like to test your composition on specific charts use this website.

SHAPE

Another interesting channel we can use to help visually impaired people easily distinguish between coded data is to assign shapes to different data categories. A good example of how the introduction of shapes can make difference is the well-known RAG.

RAG stands for RED-AMBER-GREEN and is widely used in business environment to communicate performances, risks or statuses of activities. It is most commonly used in project management to report status of tasks, but due to its simplicity, it is also used in data visualization to highlight for instance KPIs (key performance indicators) performance. Red indicates about underperforming, amber that something is an issue and needs to be monitored, and green that is fine.

But as you already know RED-GREEN can be very confusing for colour-blind people. So, my suggestion is to use a shape as another visual communication channel to make sure everyone is on the same page. Instead of format with coloured background, it would be better to introduce icons that have different shape and are coloured in red, amber, or green (see Picture 6).

Picture 6

But what about charts like line chart or bar chart? How can we improve distinction between specific lines or bars? We can use different patterns to distinguish one bar from the rest one or to present several lines on one chart (see Picture 7).

Picture 7

WRITTEN INSIGHTS

Written descriptions, recommendations or insights can be tricky. Especially when you want to use colour names to emphasise certain points, data categories or issues. How someone, who does not see green colour (see Picture 1) can understand a message “All departments represented by green bars have exceeded their sales targets this year”? This message must be rewritten to “Departments A,B, and C have exceeded their sales targets this year” to ensure that all stakeholders understand it.

LOW VISION

In addition to the most recognizable challenge, which is colour blindness in data visualizations design, there is another related to vision loss due to age, accidents, or genetics. For those who suffers from low vision, we must remember that size and contrast of displayed text matters. Especially when we display some materials on screens in conference rooms, but even when you present something via communicators as Teams, or Zoom, size matters. You can read more about the topic here.

SIZE

When it comes to the font size, there is no one good recommendation. It depends on the purpose. If you are going to display materials at a conference in a large conference room, it is better not to use smaller fonts than 18 when describing axes or legend and have less information on the slides. There is nothing wrong in having more readable slides rather than fewer but cluttered.

A different approach can be taken when creating reports. I would say use a font size 9 or 10 for axis or legend description, but in no other case should you go lower than 12. In reports crucial thing is to group information together or to display them in close proximity to make it easier to interpret or make decisions. That is why optimizing space is so important. These screens can always be enlarged, and anyone can take advantage of them.

Picture 8

CONTRAST

The general rule is to maintain high contrast between background and foreground (e.g. white – black, black – white). A typical accessible barrier for people with low contrast sensitivity is grey text or figures on a light background. However, for some people better combination is with lower contrast, because they suffer from the bright background (e.g. they have to change a screen background to the darker to be able read what is on the screen).

As you can see there is no single best answer how to approach this challenge. A good practice is to give people the option to change the display mode from bright (light background and dark foreground) to dark one (dark background and light foreground).

Picture 9

By these small changes, we are bringing better user experience in our organizations or widely, if we prepare data visualizations for the media or other public usage.

[1]https://rochester.edu/news/show.php?id=3856

[2] https://journals.sagepub.com/doi/full/10.1177/2158244014525423