The challenges of colour in data visualisation
Introducing data visualisation into our new brand
Starting with why
At the start of last year, GoCardless went through a rebranding process where we updated our new identity to position ourselves for future success. As part of the rebrand, our team of talented designers worked on updating all things visual, including our design system. While working through all these crucial foundations, components and patterns, we soon discovered a demand for data visualisation. We needed to build a framework around it — making it easier for our users to make quick, informed, and data-driven decisions. The Brand Design team has produced some great data visualisations for various projects in the past but the focus was less on the user experience and more on the visual. The product needed something more functional due to the type of data that needs to be visualised. This was a great opportunity but where do we start?
But first, what is data visualisation?
It’s the visual representation of data and information. The resulting visuals are designed to make it easy to compare data and use it to tell a story — both of which can help viewers in decision-making.
Understanding the core fundamentals of data visualisation was key. Its foundational elements share a lot of characteristics with the design system, but some elements, such as colour, needed extra consideration for use in data visualisation. We also needed to consider the core components, such as data points, lines, grids and axes. Combining these two we can build our variations of charts (such as bar and line) to present comparisons or trends over time. At the core of this, it was clear that we needed to start small and work our way up to a fully interactive data visualisation system.
Starting small — Colour
During the rebrand, we built out a whole new colour palette to reflect our new identity. This was split into three palettes: a core palette, an extended palette, and a utility palette. During some data visualisation exploration work, we began to use our new colour palette but quickly noticed some issues.
Key points we considered:
- How can we make sure our users can easily differentiate between data points?
- Are there guidelines we should follow for colour impairments?
- What would be the hierarchy of colours?
- Which colour would lead the palette?
- What colours should we use to help differentiate data?
- Would using our utility colours confuse our users?
This was when we realised that we needed to build out a colour palette dedicated to data visualisation. It wasn’t as easy as just picking colours from our palette — we needed to ensure the colours worked for our data requirements.
Colour — What we have
The goal wasn’t to create a whole new colour palette but to use what we have to create rules and a framework. So where did we begin? We decided to focus our attention on the extended colour palette.
Core palette
Our core palette is used frequently throughout our brand and product, so we worried the colours would lack distinction if used in our data visualisations. Our primary colour Dawn (a bold, vibrant yellow) is great when used tactically, but needs careful consideration due to accessibility concerns. Yellow on white and white on yellow will fail a contrast check, but yellow and black have a strong contrast ratio. We also wanted to use two core colours (Brownstone and Greystone) for other data visualisation elements, such as grids and backgrounds.
Utility palette
Our utility palette communicates purpose. The colours convey a message or a status (i.e. red = error; green = success) which is something we wanted to avoid in our data visualisations. We don’t want any preconceived notions to confuse our users.
Extended palette
Our extended palette consists of nine colours, each one significantly different from the rest. They were ideal for displaying multiple data points and gave us the opportunity to build and test a data visualisation colour palette.
Colour blindness
The first area we wanted to explore was how our colours are seen by people with colour impairments and how we can make our palette accessible to everyone. Around 8% of the world’s population have some form of colour blindness, which is split into eight different types. Some are more common than others, whereas other types like Achromatopsia (near to complete colour blindness) are very uncommon.
This area was important to us as we aim to have a high level of accessibility across our brand and product. The first step was to see how our extended colour palette looks through each type of colour blindness. We were able to find a Figma plugin called Color Blind which turns your selected colours into all eight types of colour blindness.
From here we were able to compare each colour within each colour group to see which colours were too similar in colour and contrast. This was a process of identifying which colours should not be paired together. After scanning every possible colour pairing we’re able to eliminate five colour pairs that would not pass for colour blindness.
With the remaining colours available to pair, we went through a long process of matching up every possible pairing and grouping them into different levels of contrast. The goal here was to pull out the colour pairings that had the highest contrast, which would help us even more with colour accessibility. We also considered a medium contrast group of colour pairs (that were also suitable) as we knew that we would need more options during this process of elimination. The third group included seven colour pairs that were too low in contrast and wouldn’t meet our accessibility standards. These colour pairs would cause problems when trying to visualise data as they have very little contrast when put together.
Colour combination
The next step in building our data visualisation colour palette was to use the colour pairs from the previous step and combine them to see which colours worked together. We still had to keep in mind the colours that we eliminated from the colour blindness test, as well as the low-contrast colours from the colour pairing. Again, this was a process of elimination to discover the best colour combinations for colour blindness and colour contrast. The process involved testing each colour from the extended colour palette against each colour pair to see if we could combine them together. We slowly began to notice that we could only go so far with the colour combinations due to the limitations we set ourselves. At the end of this combination stage, we were able to uncover five possible combinations — four that include three colours, and one that includes four colours.
This was great! Although we soon realised after some discussions and reviewing that these would need to be displayed on light and dark backgrounds as part of our rebrand. Our dark green colour (Slate) is one of these background colours, so we had to remove it from the colour combinations. This left us with only two combinations of three colours, which was far from ideal. So how do we build a complete colour palette when only a small handful of colours work together?
A Categorical palette
What we needed to build.
We stumbled upon the problem of not being able to find the perfect colour palette from our extended palette. We followed the right steps around colour blindness, accessibility and combinations but were left with only a few winning colours. What were we missing?
We decided to explore how other design systems approached this to see what inspiration we could pull in. The Carbon Design System by IBM is an open-source design system which has a great breakdown of colour for data visualisation and how they use it. In their section around data visualisation colour palettes, they explain a series of palettes and the purpose each one provides. Each palette served a purpose that depends on the data and message you want to tell. The one that stood out for us based on what we wanted to achieve is called a ‘Categorical palette’. What exactly is a categorial palette?
Categorical palettes are used to distinguish discrete categories of data that do not have an inherent correlation. The colours of this palette should be applied strictly in sequence.
This was perfect for what we wanted to build as we didn’t want to have any colours have direct meaning to the data and this would help solve our issue of utility colours. We’re able to build a hierarchy of colours leading with our winning colours from our testing.
We made a decision to use the colours in this order; Sunset, Ultraviolet, Sunrise, and then Pebble. The reason for this decision was based on the colour pairing and combinations. Sunset works well with all these colours so it was a clear decision to put it first. Ultraviolet and Sunrise were the next colours to pair the most so they came next. We decided to put Ultraviolet as second due to it having a slightly higher contrast with Sunset. Pebble was then left to sit in fourth.
This was great! We were beginning to see our data visualisation palette start to form, although we still had the issue of not having enough colours. The great thing about using the categorical palette is that we can bring back the next best colours and use them in order.
We decided to bring back ‘Clay’ and ‘Dusk’ for positions five and six as these colours had good contrast with the other colours and didn’t have any issue with colour blindness. We did have to make adjustments to the colour value of some of these as we began to test them on both light and dark backgrounds.
Each colour in our palette has its own colour range which was ideal for us when we needed to adjust certain colours to best fit the background that they would sit on. Our base colours for our extended colour palette are all set to 700 which was our middle point measurement on the scale. This ran from 50 (a lighter tone) all the way to 1400 (a deeper tone). This gave us the ability to still keep our extended colour palette without having to change or introduce new colours.
We would adjust the colours by slightly going up or down the scale to give it the best contrast to its background without drastically changing its colour range. During this process of refinement, we noticed that there was still the challenge of accessibility, making sure we were still aligned with our goal.
Colour accessibility
At GoCardless we have a goal of meeting a high level of accessibility with a minimum score of AA. To measure this, we follow the WGAG guidelines to help us make sure our designs pass the correct accessibility standards. The WGAG have various levels of standards for different elements, but what we want to test is colour usage in data visualisation. We knew that these colours would be used to plot data so this fell into the WGAGs category of non-text elements. To achieve the AA score for non-text elements we must pass a contrast ratio of 3:1 or higher. What does this even mean? The higher the contrast the higher the ratio, so we needed to measure one colour against another colour’s background. We used WebAim — an online colour contrast checker where we can input these two colours to reveal the contrast ratio and see whether it passes or not.
The next step was to run our six colours against our four different background colours to see if they pass the AA score. As you can see in the image below, less than half of the colours failed and some did extremely well when placed on darker backgrounds.
It was clear that there was some work to be done to get each colour to pass the score. Each colour would carefully need to be adjusted so that it wouldn’t look too different when it’s on a light or dark background. To speed up the process we knew we could test the colours on just Brownstone 50 for the light background and Slate for the dark background. Testing on these two colours would let us know if they pass on the other lighter and darker backgrounds due to the contrast between them.
While working on the adjustments we came across a challenge with our yellow colour Sunrise. We found that getting Sunrise on a light background to pass the AA score was causing it to look more different to how it looks on a dark background. We were able to create the best outcome for Sunrise but made the decision to move it further down the line as we wanted our strongest colours to sit in the Categorical palette.
Our Categorial palette was finally taking shape but we still had the challenge of not having quite enough colours when we need to visualise multiple data points. We knew that in most cases we wouldn’t need to use more than 4–5 colours in one given visual but there may be edge cases where we would. Based on this decision we decided to bring back the remaining colours from our extended palette with careful consideration of what order they go in. We still had to adhere to our guidelines around colour blindness and colour contrast so we began testing the remaining three colours on the light and dark backgrounds.
The final palette
After a long but fun process of iterating and testing, we created our Categorial palette ready to be used for visualising data. As mentioned earlier these colours will be used strictly in order. For example, if we need to present 3 different variables we would the first three colours in sequence (Sunset, Ultraviolet and Pebble).
From here we were able to start using our new colours to visualise data and begin building the framework.
Things we learnt along the way
Colour is a tricky foundation to get right if you want to meet accessibility standards. You can’t solely rely on colour to convey meaning as it will limit your outcomes over time. It’s important to test your colours throughout the process to make sure you have the best contrast between neighbouring colours and allow for colour impairments.
Colour helps to bring the data to life, allowing our users to compare data and convey a story.
Explorative vs Functional
A key insight we made from the very beginning of this project was how we use the new palette across our brand. Can we use this for all data visualisation work across the business or are we limiting ourselves when it comes to designing more decorative visualisations such as those done by the Brand Design team? The answer is both yes and no. The goal is to split our approach into two when using colour.
Explorative — Brand Design
Might not be trying to prove a specific point, but want to provide an overview of the situation. Allowing the audience to explore and understand it. Here we can have more room to play with our colours but try to stick as true to the Categorical palette as possible.
Functional — Product Design
This is when you want to provide an accurate representation of the data allowing the audience to form an easy understanding of it. Allowing the audience to identify patterns, trends and outliers in data sets. Here we will stay true to our palette as the data is more important to visualise accurately.
What’s next?
It was great that we were able to complete one of the first steps in improving our data visualisation but we still had more work to do. The next steps involve creating documentation around how to use these colours and add them to our codebase. Then we will start exploring the wide range of components that we need to design to make up our framework while testing them with our users to get qualitative data. The GoCardless data visualisation library
is still very much a work in progress and will continue to grow.
Hopefully, you’ve learnt a thing or two about the challenges and obstacles of colour and can use what we found to help build your own palette.
Feel free to get in touch with me on Linkedin.
