Accessible charts and graphs

The following 10 tips will help to make your images, charts and graphs more accessible for all GOV.UK users.

1. Good practice means

do not rely on colour to convey information
use different styled lines in a line chart or different types of shading in bar charts, rather than colour, to convey information
where possible attach the meaning of lines or bars to the lines and bars themselves not in a separate legend
use legible text, Arial 12, for example – no tiny 8pt text
make sure foreground text has a high level of contrast with the background colour
convey as much as possible of the information in a graph or chart in the body of the text

2. Use Scalable Vector Graphics (SVG) images

SVG images are more accessible than JPEGs because they are more easily resized across different display sizes (for example, desktop versus mobile).

What’s an SVG picture? - Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

3. Write useful captions

Users may struggle to connect the dots: “Value A has been on the rise throughout the last 4 years, but decreased significantly during the last quarter… why?” The caption below answers that question.

This chart shows global sales figures for Apple Mac computers during the past 5 years (2014 until present). The numbers indicate that sales increase dramatically in every fourth quarter, remain high in the first quarter, then decline rapidly in the second and third quarters. This tendency can be explained by Apple holding its annual event (where it showcases new devices) during Q4. Users buy the newest Macs during Q4 and subsequent Q1, but prefer to wait for newer devices during time periods of Q2 and Q3.

4. Use shades of the same colour for optimal accessibility

This pie chart passes colour contrast standards, as does the map below.

See the live demo: https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices/

Never use colour on its own to signify something. Add text and figures, too, to make your point clear.

Examples of bad and good colour contrast

In the following example there are orange text links and an orange button with white text, that have low colour contrast (in this case a contrast ratio of 3.1:1 which is well below the recommended minimum of 4.5:1):

In the next example, the green button with white text shows good colour contrast (with a contrast ratio of 4.9:1 which is above the recommended minimum of 4.5:1):

Read more about good and bad colour contrast here: https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/

The ONS has an excellent guide for using colours in graphs and charts.

Check your colour contrast ratio

Check whether your colour combination is accessible on these sites:

https://contrast-ratio.com/

https://accessibility.oit.ncsu.edu/tools/color-contrast/index.php

http://colorsafe.co/

https://www.color-blindness.com/coblis-color-blindness-simulator/

And download the No Coffee vision simulator app to see how your content appears to users with different visual problems.

5. Duplicate data from charts to tables

This can be achieved in Whitehall publisher through markdown on bar charts only.

See examples below (https://coronavirus.data.gov.uk/?_ga=2.243315781.1111519399.1589185613-821964714.1580481485) and learn how to do this at https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown.

The same info is displayed in a table below, thereby giving users options to suit their requirements.

6. Fill in colour below graph lines

Add words and figures into the charts where possible so you are not solely relying on colours or patterns to convey your message.

7. Give greyscale good visibility

Increase the contrast on greyscale prints by applying dash styles to line series.

This makes lines distinguishable even on poor black and white prints. See this live demo.

https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices/

You’ll find accessibility demos for pie charts, line charts, maps, stocks here: https://www.highcharts.com/a11y.html

8. Use white space

When information is too densely packed, the graphic can feel overwhelming and unreadable.

In the following example, compare how easily you can distinguish the sections.

9. Label data directly

10. Use these tutorials to help you create accessible charts and graphs

Much of the above information comes from https://www.highcharts.com/blog/tutorials/best-chart-accessibility-practices (you’ll find live demos here, too).

To make page structure, menus, images, tables, forms and carousels more accessible, see https://www.w3.org/WAI/tutorials/images/complex.

Resources

Page tree