The challenge of chart colours and the art of accessibility
Our journey through the colour wheel and back again…
How much attention have you ever paid to the colours used within a data graph or chart? To many people, they might seem meaningless and perhaps even unimportant, but to us at Auto Trader they’re crucial. The retailers who use our services rely heavily on our charts. To help them interpret their sales data, manage their stock and optimise their business.
We have two common types of charts;
- Categorical: showing different categories of data without making any seem more important than the others
- Choropleth: showing differences within one category (such as density, quantity or rating)
So what’s the problem?
Before this project began, we were using colours based on older brand palettes to design our graphs. These palettes presented two main problems.
- Many of the colours were unusable because they were simply not accessible (more on this later).
- Some were too close in colour to what we call ‘emotive’ colours, sometimes referred to as RAG (red, amber, green). These colours are often used to convey meaning or status. So, for example, if we used these colours to show how many calls vs emails a dealership received, one category might look more important than the other.
An unexpected opportunity for improvement
We recently found ourselves needing to add a new data point to a chart, which meant we also needed to add a whole new colour to the colour palette. We saw this as a great opportunity to improve the colour set as a whole, focusing on accessibility and usability, and also bringing it more on brand if possible.
Colour is a major factor in accessibility, and colour blindness affects approximately 4.5% of the UK population. It’s higher in men so it’s likely to be closer to 8% for users of our tools, who are mostly male.
There are several different types of colour blindness, but the most common is red/green confusion and within that Deutranomoly is by far the most prevalent. We must also remember that the majority of our users are not colour blind. So we needed to ensure any changes that we made still worked for our non-colour blind users too.
Including those just mentioned, here are some considerations and questions we had to keep in mind when exploring a new colour palette.
- Accessibility: Does our palette pass colour blindness and colour contrast tests?
- Usability: Can everybody use our graphs with ease, even those without colour vision issues?
- Brand: Do our colours feel like an Auto Trader experience?
- Emotion: Are we successfully avoiding emotive colours, and keeping data neutral?
- Priority and sequencing: Have we considered that sometimes categories (and our chosen colour sequence) may be shown in a different order due to available data?
- Different chart types: Does our solution work for the various charts and data we need to visualise?
- Developer effort: What improvements can we make that are effective but need low effort from our development team?
What we did
Accessibility
We already have several accessibility features built in to help with reading, understanding and the usability of our charts including…
- White divider lines help when similar colours are next to each other by defining and separating them
- The key matches the order that the items are shown
- Toggle functionality allows items on the key to be switched off and on, so a user can pinpoint a certain item or hide ones they’re not interested in
- Users can hover over areas of the chart to trigger a tooltip providing more specific contextual information
However, we needed to go further to improve the accessibility of our charts for everybody, starting with the colours we use.
Research showed that tone (lightness/darkness) of colour is key to helping colour blind users tell colours apart. So, we tried using different shades of our AT Brand Blue and playing with the order to make sure there was enough contrast between neighbouring colours. This was on brand (obviously!), the muted palette felt professional with no implied meaning and the selection had decent accessibility for colour blind users. So far, so good.
…but, it was a little difficult for non-colour blind users to use. And could still have better accessibility for all because some of the shades were quite similar to each other. It was also maybe too blue?
Usability
As mentioned the majority of our users are likely to have no colour blindness requirements. So our next versions involved lots of experimentation, adding more colours but avoiding those ‘emotive’ RAG colours. Although we would like to keep a link with the brand, we wanted to be flexible and not restrict ourselves too much. So we tried many combinations of ‘non-brand’ colours including blues, purples, pinks and turquoise in sets of 2, 3 and 4.
…but, they were a little confusing, quite bright and ended up looking like a kid’s dessert with lots of colourful sauces and sprinkles! We were losing some of the improvements we’d made on the earlier versions, especially the accessibility, and professional, non-emotive feel. Also, the colour palette was getting too far removed from the brand, which made it feel less like an Auto Trader tool.
Brand
Using everything we’d learnt through our exploration we created a colour set that used a mixture of our brand blues and some aqua tones, as well as some extra complementary shades of both. The aqua colours are part of our Retailer Brand System but are not currently utilised anywhere except the logo. This colour feels digital, technical and professional, which suits this online tool. The aqua colour also works well alongside the brand blues without expressing too much meaning or emotion, especially when spread throughout the sequence order.
Testing
We experimented with the order, running through various colour contrast checker tools and simulators to get the best sequence for accessibility for all. We also concentrated on the contrast being better for the most-used charts (which are the lower sequences, especially the 3 items and the 5 items).
We had various design critique sessions with the Product Design and Research teams and got feedback from the Product Owners and our Portal experts. We’re also lucky to have some colour blind colleagues who were generous enough to look over the colour sets and give us their valuable first-hand input.
Summary
So after lots of exploration, experimentation, testing and seeing colour sets every time we closed our eyes, we finally got to our chosen solution!
This version is accessible for both colour blind and non-colour blind users, with good colour contrast, especially at those lower, most-used sequences. It’s on-brand and the colours feel professional without implying any specific meaning. It works well across our different types of charts, including the categorical and choropleth and it's an upgrade that is effective but lightweight, requiring low developer effort.
It’s by no means perfect, but it's a huge improvement and, although some may not even notice the change, it will ultimately create a better user experience for all our customers, making their jobs easier and their time more effective. That being said we did actually get some positive feedback on this change from the retailers! Updating our tools so that they’re more inclusive and accessible for some of our users, often improves them for everyone.
How we got there
As mentioned we used various tools and read lots of blogs and articles which were really helpful when exploring and testing, so we’ll shout them out here:
- Sim Daltonism tool: This is a free tool for Mac and iOS that helps you visualise colours as they would look for people with various types of colour blindness. I have shown it in use on images throughout this article. It’s a quick, easy and effective way to gain more empathy and understanding for users with colour blindness.
- Carbon Design Medium blog: This article documents Carbon’s process and some of the challenges they faced when creating their data visualisation library. Their problem was bigger and more complex than ours, but the parts about sequential colour and accessibility formed a great basis for me to start my own exploration.
- Shopify Medium blog: Their article about flexible colours and themes for data visualisations gave me some great background knowledge about colour theory and accessibility. And as with the Carbon Design blog, let me know in advance that the process wouldn’t be easy!
- Viz Palette: A brilliant free tool created by Susie Lu which uses javascript to create an editable set of data visualisations. This made it easy to quickly see various colour sets I was exploring in action, as well as flagging potential colour issues in the colour report section.
- W3 WCAG 2.1 guidelines: The applicable success criteria from the WCAG guidelines for this are “that colour is not the only visual means of conveying information” (which we covered with our other inbuilt chart features) and that “visual information required to identify UI components and states… has a contrast ratio of at least 3:1 against adjacent colours”.
- Contrast Ratio tool: A simple but effective tool allowing you to check the contrast ratio between two colours. This helped me to decide the order of the colour set, allowing me to optimise contrast between colours next to one another, aiming for a 3:1 contrast ratio (from WCAG guidelines), especially in the most used sequences.
What’s next?
We switched to the new colour palette in February 2022, alongside a notification to our users (the retailers who use this tool every day) linking to an article detailing the reasoning for the change, to make the charts more accessible to all.
This project focussed on the ‘non-emotive’ colours used for charts in Portal, and not those red, amber and green (RAG) colours. Knowing that red/green confusion is the most common type of colour blindness, this is something that we will look to improve going forward for better accessibility, although we do already ensure that colour is not the only means of conveying the information by using icons, figures and percentages alongside the colour.
