This article is a follow-up on the one about choosing colours for the dashboard. The goal there was to provide a simple and fast solution, so you could still pick colours that look good and guide attention well, without getting too deep into theory, which would slow down your work.

The same applies to this article, where I will cover one thing you have to consider when choosing colour to make reports more accessible. In the end, I will provide one strategy how to utilize it beyond just accessibility – for better guiding of the audience.

I’m not going to convince you that accessibility is important, if you are here, probably you know that dashboard which cannot be read should not be done.

dashboard which cannot be read should not be done

Contrast and readability

I’m jumping straight away into the topic – if the whole universe of accessibility topics to consider when creating a dashboard would be reduced to just one – I’d say it has to be contrast and readability.

Look at the example below – we have a very elegant and subtle text, which radiates luxury vibes. But chances are, that depending on your monitor, the lighting in your room, or how long have you been staring at the screen, you might or might not be able to read it.

Now look at another example. This is a bold black text on a white background. If you had to stare at it the entire day … well, I believe sometimes you do, and you know what happens to the eyes afterwards.

Both options are extreme cases of contrast between adjacent colours, and both ain’t good. Too much contrast makes the eyes tired, too little contrast makes things unreadable and because of that – eyes tired. See the next example, a not black text on a not white background. I bet this is more pleasant than those extreme cases.

What is the right contrast? The readable one. And readability depends a lot on the circumstances. If you make a presentation – you will face issues with poor lighting, crazy projectors, people being too far from the screen – you have to crank contrast to the maximum. But don’t worry, no one will stare at your slides forever.

However, if you are creating a dashboard everyone is going to consume in a well lit office environments – probably less contrast or even a dark background is something to try. (Dark mode is such a controversial topic, I will write a separate article about it!)

Now I will explain how setting this contrast just right – not too much, not too little, will affect the accessibility of your dashboard. But first, we have to talk about colour blindness.

Colour blindness and other sight deficiencies

People might not perceive colours as you do. It is well known among data visualisation professionals that a few percent of men have some type of colour deficiency where they cannot distinguish some colours. But most of us probably never met any of such people or made dashboards for them, so many of us are not sure why should we care? OK, let’s not care, and pretend those people do not exist. Don’t worry, we will still have a solution for them.

But then we have temporary sight deficiencies. Due to headache today, you might be a bit more sensitive to bright colours than usual. Just today. Or due to conjunctivitis, your sight is not as perfect as usual. Just this week.

And then we have situational sight deficiencies. Maybe you are coming from a dark room where you watched a presentation, and now you want to check some dashboard – boom it’s too bright! Or the screen isn’t good. Or the sun is too bright behind you.

And finally, we have crazy people who put blue light filter on their screen on maximum strength. It is not a sight deficiency, but it distorts what they see. The same goes with people printing the dashboard in greyscale – colours will be distorted due to… let’s call it “technological processing”.

That is why making music involves the stage of mastering, when a sound engineer makes sure that the music sounds well on ALL possible sound systems – your headphones, your laptop speakers, your crappy cheap speakers and your high-end audiophile gear as well. The same should apply to the dashboard – you should be able to differentiate things on any screen and media.

That is why I’m not buying that you should simply avoid the red ■ and green ■ colour combination, and you’re good. Red and green is an extremely common combination with a lot of semantic meaning – red is dangerous, green is safe, it just happens to be not distinguishable for people with certain sight deficiency. By simply avoiding this combination, we might be losing on all the intuitiveness it provides for other people.

What to do instead? Make the contrast just right.

If you pick plain red and simple green ■■, but adjust their colour properties so they are a bit more contrasting – for example, make green much lighter ■■, or less saturated ■■ – you are solving multiple problems at once.

Colour blindness simulation shows that edited red and green can be distinguished by those who cannot usually distinguish these – it is simply because they are contrasting enough by some other property – for example lightness. The same goes if we apply greyscale simulation – they are still distinguishable when printed! Good contrast will solve other temporary, situational or crazy vision issues as well!

Bear in mind that colours should not only be distinguishable from each other but also against the background. This is essential for text. I’m barely touching this topic so we will not go deeper into contrast metrics, but here is a link to check how good your contrast is.

Avoiding confusion

Working with designers from the Graphic Design field on data visualisation projects might be challenging. While they know multiple perfect strategies for making things look pretty, they might miss the point that every pixel of colour in data visualisation carries information.

every pixel of colour in data visualization carries information

Once I was working with a company where the brand book suggested light blue ■ together with light green ■ for clustered column chart. Those colours were indistinguishable, but people were actually making such charts because this was in the brand book.

After a few complaints, the brand book was adjusted, and a new suggestion was made – light red ■ with pale grey ■. Do you see what is the problem now?

There is a lot of confusion introduced by this type of palette – whatever two things you draw – the red item will always seem highlighted on a white background. Is that what we always want? Probably not. That is why too much contrast is not suitable as well and introduces this “accidental highlighting” problem.

Consider the chart below on the left. While those colour might be a way to encode categories, one of them just looks too outstanding, it simply draws attention, and people might think – the third bar is highlighted! That is not true, another case of “accidental highlighting” due to contrast choice.

Now check the same chart in greyscale on the right. Seems like there are two categories now, which just happen to be nicely mixed. This looks more like “accidental categorization” when bars appear to belong to the same category while they are not. Picking the right contrast is not easy if there are multiple colours, that is why avoiding more than 3 different hues in a dashboard is a good strategy.

While you have to make sure that different things look different, another goal is to make sure that similar things still look similar even if they have different colours.

One strategy of achieving such effect is to make things right in black and white (the quote taken from here). If colours look similar in greyscale – they will probably look similar in other lighting and display conditions. Why not remove all the colours altogether? Let’s see what can we get out of that!

Strategy of deemphasizing

When we take care of colour contrast and make it just right – not too much, not too little, we are making our dashboard more accessible and avoiding confusion that might arise.

Furthermore, we are opening the gate for some flexibility on rearranging things on the dashboard. If everything is super contrasting at once – we might have trouble to highlighting something.

Consider the image below. How to make people draw attention to smaller bars in the third category ■ instead of bigger ones in the second ■. Colours are bright and bold and even the red – the Queen of Highlighting, is unable to compete with the sheer size of bigger bars. Should I pick an even bolder colour?

To deal with such situations, let’s try “Deemphasizing everything else” instead of “Emphasising that one thing”. This would look something like in the images below. Instead of adding more aggressive colours, I make other bars grey, and then I’m quite flexible to emphasise either one category, either one cluster without the need to stretch colours too far. A simple variation of red will do in this case. Going all grey is not necessary – you could make the colour less contrasting with the background by desaturation or lightening (for light backgrounds, darkening for dark backgrounds).

So, next time when you have to compete with colours for people’s attention – just don’t!

People will thank you

I had cases when people seeing my slides on a dark background publicly thanked me that finally someone considered accessibility. On the other had, I had a case when there was not enough contrast in the slides – people criticized me for not being able to distinguish colours.

In the end, accessibility is a topic that deserves the attention of dashboard developers because you might not know if there is a colour-blind person in the audience, a crazy one with a blue light filter on the screen, or someone just having a hangover.

I hope that this little step in accessibility will be just right amount of information which will get you started on the topic, or will just let you improve the work you do.