Making data visualization accessible — a case study

Something that Sainsbury’s colleagues use on a regular basis is reporting tools. Viewing and making sense of data is crucial to the operation of the business. We need to visualise this data in an accessible format.

Peter Holmes

Jan 7, 2020·5 min read

Example of data visualisation at Sainsbury’s

Why?

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 are 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.

Sainsbury’s Design System — 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 are supporting that mission to be the most inclusive retailer.

I set myself a challenge of creating a number of accessible data visualisation patterns. These would seamlessly fit 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 sometimes even impossible to properly understand the information in these visualisations. For example, if you are colour blind it may be difficult to distinguish between different colours. This could be incredibly frustrating for you and could lead to important information being completely misinterpreted.

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 the individual elements of charts making 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 a 8 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.

Colours are swatched from the gradient and this is resized on the grid to give greater contrast for the number of data series.

Each colour multi-hue gradient palette is formed from a brand colour down to 20% opacity

The following palette resulted in steps that have clear definition with these forms of colour blindness:

1. Deuteranopia -difficulty distinguishing between red and green
2. Protanopia — difficulty distinguishing between blue and green and also between red and green
3. Tritanopia — difficulty distinguishing between blue and yellow
4. Greyscale — total colour blindness viewing in shades of grey (or black and white)

I used a fantastic colour blindness simulator, Colour Oracle, to view how these palettes would look. Download it now and have a go…

Color Oracle

Color Oracle is a free color blindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing…

colororacle.org

The resulting view of the orange palette with the colour simulator:

Deuteranopia and Protanopia

Tritanopia and Greyscale

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 complimented by the optional layers (tooltips, hero data) and visual layers of colour.

It’s worth noting that 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

Peter Holmes

Senior Experience Designer @ Sainsbury’s Digital

Follow

PETER HOLMES FOLLOWS

•  

  Holly Lancefield

•  

  Callum Kilby

•  

  Steve Johnson

•  

  Conor Ward

•  

  Jo Milne

See all (13)

134

1

Sign up for The UX Collective Newsletter

By UX Collective

A weekly, ad-free newsletter that helps designers stay in the know, be productive, and think more critically about their work. Take a look.

Get this newsletter