olihawkins

Developing a vibrant accessible colour palette

7 Apr 2019 13:29 GMT

I have been working with ggplot2 themes lately, including developing a theme for the House of Commons Library. In my spare time I have also been working on a plotting theme for personal projects. For this theme I wanted a vibrant colour palette for representing discrete categories that is accessible to people with the most common kinds of colour blindness.1

I don't have any expertise in colour vision, but there are lots of good tools to help you test how a given set of colours look to different people, including Susie Lu and Elijah Meeks' Viz Palette and the Coblis colour blindness simulator.

I spent a while playing around with colours in Viz Palette, trying to come up with a set that are visually distinct for most people. I was interested to see how many categories it was possible to safely represent.

I managed to come up with a six colour palette that seems to work reasonably well in most cases. I stress, this was just the result of my own inexpert trial and error. I am sure there is room for improvement. The colours are:

  • blue [#0080e8]
  • sky [#70d0ff]
  • mint [#98f098]
  • yellow [#ffa000]
  • green [#009900]
  • magenta [#c00060]

There are two caveats to bear in mind. First, this palette still fails for people with the most severe and least common types of colour blindness, such as tritanopia and monochromacy.

Second, the palette takes advantage of differences in the perceived brightness of different colours, so colours that look different to people with no colour deficiency appear as different shades of the same colour to people with protanopia and deuteranopia.

In practice, this means you need to take care if you interpolate between the colours in this palette to represent more than six categories. Doing this may reduce accessibility, as it risks creating colours that are not visually distinct to some people. The sequence of the colours in the palette has been chosen to reduce this risk, but it needs to be considered. To be on the safe side, use the same number of colours from the palette as there are categories and don't interpolate.

Column charts

The following charts approximate how this palette looks as a basic column chart to people with different types of vision. The colours shown are based on the transformations shown on Viz Palette, which I assume are a good approximation.

If you are colour blind in one of the ways listed here, I would love to know if you can in fact distinguish between the colours in the first chart in the way the colour blindness simulators suggest you are able to.

A simple bar chart showing how the colours look to a person with normal vision

A simple bar chart showing how the colours look to a person with deuteranomaly

A simple bar chart showing how the colours look to a person with protanomaly

A simple bar chart showing how the colours look to a person with protanopia

A simple bar chart showing how the colours look to a person with deuteranopia

Scatter plots

I wanted to test the palette in the most difficult case. So here is the same comparison using a messy scatter plot with all six categories. The charts show turnout in Parliamentary constituencies at the 2017 General Election by median age, with each constituency shaded according its settlement class, based on the Library's city and town classification of constituencies.

A scatter plot showing how the colours look to a person with normal vision

A scatter plot showing how the colours look to a person with deuteranomaly

A scatter plot showing how the colours look to a person with protanomaly

A scatter plot showing how the colours look to a person with protanopia

A scatter plot showing how the colours look to a person with deuteranopia

Line charts

And finally, here is the same comparison again with a line chart, showing an index of the value of various technology stocks over the last decade.

A line chart showing how the colours look to a person with normal vision

A line chart showing how the colours look to a person with deuteranomaly

A line chart showing how the colours look to a person with protanomaly

A line chart showing how the colours look to a person with protanopia

A line chart showing how the colours look to a person with deuteranopia

The palette is available as ggplot2 scales in the pilot package, which is my general purpose plotting theme. You are more than welcome to use or fork it, but I make no guarantees that the theme elements won't change in future.

Footnotes

1. A quick note about the spelling of colour. I'm British so I spell colour “colour”. But in most English-based programming languages the word colour is spelled “color”. Consequently, I've developed a habit of using “color” everywhere in source code, and “colour” in all other contexts. But it's leaky. Is a GitHub readme source code? Probably, if it includes function signatures.