More accessible line charts
Learn how to effectively style line charts.
How to create a more accessible line chart
The default settings for chart software are not guaranteed to be accessible, and often need to be adapted for your own chart. Let’s transform a line chart to make it more accessible.
Scrollytelling visualisation by Nicola Rennie.
Default ggplot2 chart
The first thing that jumps out in the default chart, is how thin the lines are and how that makes them quite difficult to see. The default font size is also quite small.
Increase the line width and font size.
Colours
Ideally, we want the line colours to be distinguishable from each other, and also from the background.
Check colour contrast in greyscale.
Since all of the default colours are equally bright, in greyscale they look identical and there’s no way to tell apart the lines.
Replace default colours with more accessible palette.
Don’t rely on colour
Regardless of how well chosen you think your colours are, it’s important never to rely on them as the only method of distinguishing groups.
Add direct labels to the end of lines.
Depending on the data, direct labels may not be sufficient.
Ensure you actually visually inspect your chart.
Regardless of how well you can distinguish colours, it’s really hard to distinguish the lines from each other here.
Consider additional ways to distinguish categories, like symbols.
It’s might be more accessible in terms of distinguishing categories but it’s actually less accessible in terms of how easy it is to read and interpret. With a quick glance, how easy is it to see which line(s) are increasing? Not very.
Consider a different chart type.
Change the chart type
A good alternative to spaghetti line charts is small multiple line charts.
Highlight one category at a time.
Since the categories are on separately labelled charts, there’s no need for colours (or symbols) to differentiate.
Use colour for highlighting, not decoration.
Make use of chart text
The title should describe the main trend in the chart. Users are more likely to understand and remember the main trend from a chart where it is also in the chart title.
Use narrative titles to summarise the chart.
Chart alternatives
When producing a chart, make sure you include alt text describing the chart. Alt text is read out by screen readers or used in place of an image if internet connection is poor. Amy Cesal’s advice for Writing Alt Text for Data Visualization is especially useful.
Include alt text and data downloads.
The transformed version is much easier to read, more accessible, and more aesthetically pleasing.
There’s isn’t an easy, formulaic way of designing the best and most accessible chart based solely on what type of data you have. And there isn’t a chart that is the best and most accessible chart for everyone because different people have different needs.
Remember: If you’re designing things for humans, one of the best things you can do is go and talk to those humans about what they need.
