Skip to main content

Better colours

This is mostly a note for ourselves about the use of colour but may be useful for others too.

We make lots of visualisations of data at Open Innovations. That generally means that we use colour a lot. But not everyone can perceive every colour and some can't perceive any colours. We should do our best to take this into account when designing visualisations. We should try to avoid excluding people through thoughtlessness. There are several things to take into account around colour.

Firstly, the Web Accessibility Initiative's accessibility guidelines say:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The intent of this is to make sure that sighted users can access information that is conveyed via colour differences. So, you should start by not only conveying information through colour. Shapes, patterns, labels, interactivity etc can all be useful to do this. But you can also try to make sure that the colours you do use are as accessible as possible.

The Verge recently had a good summary of issues faced by those with different colour deficiencies. That article recommends the DaltonLens software to simulate colour deficiences on your desktop display. I've also used Color Oracle (Mac/Windows/Linux but needs Java). Tools like these can quickly help to spot issues where two colours are perceived to be more-or-less the same. They also let you see that some sets of colours may be OK for some colour deficiencies but not necessarily for others.

There are several ways you may be using colour in a visualisation or website and each has some requirements to think about.

Better colour contrast

In a user interface you may have elements that have a text sat on a background. In these situations you should make sure to check the colour contrast between the text and background meets accessiblity guidelines such as WGAC 2's colour contrast ratio. There are simple web-based tools such as Color Contrast Checker and Accessible Colors that will help with that. The WAVE browser plugin will also help you test webpages for colour contrast (as well as find other accessibility issues).

Update 12:20: Ann Bergin has informed us that macOS lets you add colour filters as an accessibility shortcut via Accessibility > Display > Colour filters.

Better colour choices

If your use of colour is to tell apart different data series in a visualisation, then make sure to limit the number of colours you use. Even those without colour deficiencies will have a hard time once you are approaching 8 different colours. The ColorBrewer tool is useful for creating limited pallettes for sequential, diverging, or qualitative needs and can make sure they are compatible with the most common colour deficiences.

Update 13:20: If you need a series of colours with no implied order you could make use of this optimised palette from Wong, B. Points of view: Color blindness. Nat Methods 8, 441 (2011).

Better colour scales

When you are making a heat map, cartogram, calendar plot or similar you may need a continuous colour scale so that people can perceive changes in the data.

Ten or more years ago the "rainbow" (or "spectrum") colour scale was very popular amongst scientists (particularly physicists and astronomers). But the rainbow colour scale fails for all of us because of the way we perceive colours; our eyes end up seeing "edges" in the rainbow colour scale (particularly around cyan and yellow) that aren't there. That can really mislead the viewer.

Rainbow colour scale
The rainbow colour scale. Avoid using this.
Credit: Open Innovations

A good place to start, if you want to avoid perceptual issues, would be with a monotone colour scale e.g. from dark to light. These have the advantage that they should also still work if you print your visualisation on a greyscale printer! Monotone colour scales can look a bit monotonous though ;). Thankfully, over the years, plenty of people have put effort into creating perceptual colour scales. One of my favourites is Viridis which starts at purple and goes through green to yellow. We've been using it for a number of years at Open Innovations. Since 2020 it has gained much more widespread awareness in the UK after it was chosen for the UK Government's Coronovirus Dashboard.

There may also be times when you need a diverging colour scale e.g. to show negative and positive values. There are diverging scales that work for various colour deficiencies but they won't be greyscale-safe.

The four images below show how different types of color deficiencies affect a range of colour scales including: Cividis, Heat, Inferno, Magma, Mako, Plasma, Rocket, Turbo, Viridis, Planck, PiPG, RPGn, PuOr, RdBu.

  • A range of colour scales including: Cividis, Heat, Inferno, Magma, Mako, Plasma, Rocket, Turbo, Viridis, Planck, PiPG, RPGn, PuOr, RdBu.
  • A range of colour scales (Cividis, Heat, Inferno, Magma, Mako, Plasma, Rocket, Turbo, Viridis, Planck, PiPG, RPGn, PuOr, RdBu) with protanope (red-blind) deficiency.
  • A range of colour scales (Cividis, Heat, Inferno, Magma, Mako, Plasma, Rocket, Turbo, Viridis, Planck, PiPG, RPGn, PuOr, RdBu) with deuteranomaly (red-green).
  • A range of colour scales (Cividis, Heat, Inferno, Magma, Mako, Plasma, Rocket, Turbo, Viridis, Planck, PiPG, RPGn, PuOr, RdBu) with tritanopia

The first image (top left) shows the original colour scales. The following images are created with DaltonLens and show protanope (red looks more green and less bright), deuteranope (makes green look more red) and tritanope (unable to tell the difference between blue and green, purple and red, and yellow and pink) deficiencies.

If you have any ideas to add or that we can share, please get in contact with us at hello@open-innovations.org.

Update 13:20: You could also read the ONS's advice on choosing the right colours.