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 or alt text

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):