Making data visualisation accessible – a case study
Sainsbury’s colleagues use reporting tools on a regular basis. Viewing and making sense of data is crucial to the operation of the business, but we need to visualise this data in an accessible format.
Our culture
First I’d like to start with our culture and why we need to visualise data in an accessible format. It’s important to highlight that the Sainsbury’s diversity mission statement is:
To be the most inclusive retailer, where people love to work and shop.
It’s our aim to meet all of our obligations under the Equality Act (2010). We’re committed to creating web sites, mobile sites and apps that are accessible. They should be easy and enjoyable to use for our diverse base of customers. This includes customers with vision, hearing, cognitive and motor impairments.
With that at the forefront of our minds, we have designed and developed a fantastic digital design system that we call Luna.
Luna has many patterns that have accessibility baked into its design language and framework. These have been tested to ensure they work for all our users. Luna also provides advice, support and guidance on how we’re supporting that mission to be the most inclusive retailer.
I set myself the challenge of creating a number of accessible data visualisation patterns that could fit seamlessly into our Luna guidelines. This would give our designers and teams the ability to add data visualisation to our products in a consistent and effortless way.
What is data visualisation?
Data visualisation is the representation of data in the form of graphs, charts and diagrams. If you have access needs it may be difficult or even impossible to properly understand the information in these visualisations. For example, if you’re colour blind it may be difficult to distinguish between different colours. This could be incredibly frustrating and lead to important information being completely misinterpreted.
So I developed a method that would give everyone the ability to use and view accessible data.
Layering rules
By layering charts using three rules, I could separate their individual elements and make it easier to pull together data based on need.
The three rules are functional, optional and visual. The below graphic explains how this works.
By creating a functional layer including data, axis labels, tiles and a key/legend I could create a simple and understandable chart.
Layering optional elements such as tooltips, showing/hiding data and adding in visual elements such as colour and pattern would then make the chart accessible and inclusive.
Chart types chosen for this particular project were doughnut, bar and line graphs.
The accessible colour palette
The colour palette was much more complex and took a lot of time to work through. I needed to make sure that we could cater for any user with visual impairments.
To do this I ended up with an eight-column grid system that would give maximum contrast, variation and definition between steps of colour. I created a multi-hue gradient using our brand colour down to 20% opacity. I then swatched colours from that gradient on the grid from the centre point.
For each number of data series the gradient was resized on the grid to the right number of columns. This meant that the darkest colour on each data series (on the right hand side) would always be the chosen brand colour irrespective of how many data series are needed.
The following palette resulted in steps that have clear definition with these forms of colour blindness:
- Deuteranopia — difficulty distinguishing between red and green
- Protanopia — difficulty distinguishing between blue and green and also between red and green
- Tritanopia — difficulty distinguishing between blue and yellow
- Greyscale — total colour blindness viewing in shades of grey (or black and white)
I used a fantastic colour blindness simulator, Color Oracle, to view how these palettes would look. Download it now and have a go…
The resulting view of the orange palette with the colour simulator:
The higher the number of data series, the more the contrast between colours is reduced. However, this is a result of making sure that the multi-hue gradient forms part of the Sainsbury’s brand.
If you were to create a colour palette from other colours with variance of light and dark, then the contrast would be higher. This would give greater freedom to increase the amount of data series within a chart.
For example, in the following image I’ve used Sainsbury’s brand orange at the centre point, with lighter and darker colours to give a higher contrast ratio.
Adding colour to charts
This is what the resulting layers added onto the three chosen types of charts looks like. You can see how the functional layers are complemented by the optional layers (tooltips, hero data) and visual layers of colour.
This has been applied to our Sketch library. We’re also exploring how this can be applied in code for developers to pick up and use.
We’ve already used these as guidelines in many areas of the businesses, for example data covering retail sales performance and energy consumption and usage across our stores using Power BI.
As time progresses these guidelines will continue to mature and develop, and we’ll always keep exploring how to make data visualisation more accessible across our digital channels.
If you’d like to chat about anything in this article then please follow me on Twitter @petergholmes and Medium @xd.peter.holmes
Sainsbury’s are hiring and we’d love for you to help our team deliver some amazing products. If you would like to read more or apply please click the link below.
