What do we mean by accessibility?
When we talk about accessibility in this e-learning we are talking about publishing content that can be used and understood by as many people as possible regardless of health condition or impairment.
Accessibility legislation
Accessibility legislation came into force in September 2020.
This legislation means everything published on public sector website must meet the A and AA level success criteria in the Web Content Accessibility Guidelines (link opens in a new tab).
Failing to comply with the accessibility legislation could lead to legal challenges, complaints, reputational damage and a loss of public trust.
Accessibility empathy
Colour blindness
According to Colour Blind Awareness, there are around 3 million colour blind people in the UK ( approximately 4.5% of the population).
Figure 1: Bar charts representing different types of colour blindness
This image shows the same chart through several different types of filter that simulate different types of colour blindness. It illustrates that some users may not be able to use chart legends effectively.
We should consider chart colours carefully and think about ways to help people match data labels to bars, lines and segments.
Find out more using this colour blindness simulator (link opens in a new tab).
Blurred images
Figure 2: Example of a blurred line chart
This image shows how some people may see charts if they have certain sight impairments.
Avoiding things like small text and thin lines and bars can help these users.
Difficulty understanding charts
Figure 3: Example of a chart with no meaning
This image shows a clustered bar chart replaced with lots of squiggly lines.
This shows how some users may feel about charts if they find them difficult to understand.
Providing a text alternative can help users understand charts.
Alternative text that is not useful
An example of the sort of text that may be read out by screen reader software when a chart is displayed in an online publication:
Figure 1: European and North American residents helped to push visits to the UK in May 2022 up higher than the previous year
Overseas residents’ visits to the UK by month, January 2018 to May 2022
Image of line chart showing overseas residents visits UK Jan 2018 to May 2022.
Source: International Passenger Survey from the Office for National Statistics
In this example, the alternative text behind the image of the chart is: “Image of line chart showing overseas residents visits UK Jan 2018 to May 2022”.
This sort of brief alternative text does not allow screen reader users to visualise the data.
Empathy exercise: screen reader software and charts (PPTX, 1.1MB)
We have made this file as accessible as possible. Please email Analysis.Function@ons.gov.uk if you have any problems using it.
Accessibility success criteria
Remember: everything published on public sector website must meet the A and AA level success criteria in the Web Content Accessibility Guidelines (link opens in a new tab).
Success criteria for images
1.1.1 Non-text Content:
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
How this relates to data visualisation:
Provide a text alternative that explains what a chart is showing.
More information on providing a text alternative is in the ‘Publishing charts’ module (link opens in a new tab).
1.4.5 Images of text:
Text is used to convey information rather than images of text, except if the image is customisable or essential.
How this relates to data visualisation:
Keep text out of chart images whenever possible. For example, chart titles and source information should not be in chart images. But chart labels and annotations have to be within the image.
Success criteria for colours
1.4.1 Use of colour:
Colour is not used as the only visual means of conveying information.
How this relates to data visualisation:
Chart legends should be avoided whenever possible by labelling lines or segments individually. If they must be used we should state something about the layout so people can match labels using this information alongside colour.
1.3.3 Sensory characteristics:
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
How this relates to data visualisation:
Using data markers or dotted or dashed lines as the only way to differentiate between different data series would fail this criterion.
Success criteria for colour contrast
There are two more relevant success criterion that mention colour.
These both refer to a contrast ratio.
Contrast ratios are a measure of difference in brightness between two colours. They range between 1 to 1 (white on white) and 21 to 1 (black on white).
More information on how to calculate contrast ratios can be found in the Accessibility Developer Guide (link opens in a new tab).
1.4.3 Contrast (Minimum):
The visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1, except for large scale text which needs to have a contrast ratio of at least 3 to 1.
How this relates to data visualisation:
Make sure all chart labels and annotations have at least a 4.5 to 1 contrast ratio with the background colour.
Notes
- Large scale text is given as at least 18 point or 14 point bold but when charts are presented as images the text size often changes so it is best to always aim for a 4.5 to 1 contrast ratio.
- This is the minimum contrast required. Success criterion 1.4.6 contrast (enhanced) states higher contrast ratios for text but this has a AAA level so is not covered by the legislation (but a good standard to aim for when possible).
Example: Coloured text on a white background
This image shows text in blue, orange and yellow against a white background.
The first box showing blue text has a 10.24 to 1 contrast ratio with a white background. It passes accessibility success criterion 1.4.3 Contrast (Minimum) for normal and large text.
The second box showing orange text has a 3.02 to 1 contrast ratio with a white background. It passes accessibility success criterion 1.4.3 Contrast (Minimum) for large text but not for normal sized text.
The third box showing yellow text has a 1.23 to 1 contrast ratio with a white background. It fails accessibility success criterion 1.4.3 Contrast (Minimum) for all text of all sizes.
This online colour contrast checker (link opens in a new tab) can help you make sure your text has the required amount of contrast with the background colour.
1.4.11 Non-text Contrast:
The visual presentation of parts of graphics required to understand the content have a contrast ratio of at least 3 to 1 against adjacent colours except when a particular presentation is essential.
How this relates to data visualisation:
All chart elements must have at least a 3 to 1 contrast ratio with adjacent colours, unless a certain type of presentation is essential.
Colours in data visualisations
The first thing to ask yourself when adding colour to a chart is:
Do I need to add these colours?
This is because although colour helps the brain quickly identify differences, using lots of colour makes this harder.
When people look at a chart with lots of colours, they try to work out what the colours mean. If colours suggest meanings that are not there, users will waste time and effort trying to understand them.
Users are also more likely to compare chart elements when they look alike than when they look different.
Figure 4: A comparison of using multiple colours or a single colour in bar charts
This image shows two bar charts of the same fictional data. There is one series: ‘Profit of companies’. One chart uses one colour for all bars, the other uses a different colour for each bar. These charts illustrate that you should only use colour when it is needed.
Our colour palettes
We have developed three colour palettes for use in charts.
All our palettes are designed to be used with a white background.
Note: we are aware of some accessibility issues with using white as a background colour as some users may find it difficult to look at. A perfect solution would be fully customisable charts. As this is not possible at the moment we recommend white because it provides a helpful ‘anchor’ in general.
Categorical colour palette
| Colour | Hex code | RGB code | CYMK code | Example of colour |
|---|---|---|---|---|
| Dark blue | #12436D | (18, 67, 109) | (83, 39, 0, 57) | |
| Turquoise | #28A197 | (40, 161, 151) | (75, 0, 6, 37) | |
| Dark pink | #801650 | (128, 22, 80) | (0, 83, 38, 50) | |
| Orange | #F46A25 | (244, 106, 37) | (0, 57, 85, 4) | |
| Dark grey | #3D3D3D | (61, 61, 61) | (0, 0, 0, 76) | |
| Light purple | #A285D1 | (162, 133, 209) | (22, 36, 0, 18) |
This is the colour palette we have developed for categorical data. We give three types of colour codes for you to use.
This palette meets the accessibility success criterion for adjacent colours when used with a white background and in the order presented.
This palette also passed our checks for colour blindness. Also, when used in the order presented, all adjacent colours appear distinct in black and white.
Note: in general we advise a four series maximum in charts. But we have added two extra colours due to demand.
For more information see our colours guidance (link opens in a new tab).
Sequential data colour palette
| Colour | Hex code | RGB code | CYMK code | Example of colour |
|---|---|---|---|---|
| Dark blue | #12436D | (18, 67, 109) | (83, 39, 0, 57) | |
| Mid blue | #2073BC | (32, 115, 188) | (83, 39, 0, 26) | |
| Light blue | #6BACE6 | (107, 172, 230) | (53, 25, 0, 10) |
This is the colour palette we have developed for sequential data.
With sequential data the categories are related to one another, for example: age ranges.
Therefore, it makes sense that they should be represented by different shades of the same colour.
However, when using shades of the same colour it is not possible to fully meet the contrast requirements. So this palette should only be used when this sort of presentation is essential. In some instances we may also need to add outlines.
For more information see our colours guidance (link opens in a new tab).
Focus chart colour palette
| Colour | Hex code | RGB code | CYMK code | Example of colour |
|---|---|---|---|---|
| Dark blue | #12436D | (18, 67, 109) | (83, 39, 0, 57) | |
| Grey | #BFBFBF | (191, 191, 191) | (0, 0, 0, 25) |
This is the colour palette we have developed for focus charts.
Focus charts allow you to bring attention to one particular series, while keeping the other data there for comparison.
The dark blue meets the contrast requirements with the white background and the grey.
The grey does not meet the contrast requirements with the white background. Therefore, this palette should only be used when essential.
For more information see our colours guidance (link opens in a new tab).
Other colour considerations
Colour associations
When using these palettes remember that certain colours have associations. These may be natural linkages like green for grass or blue for water, or they may be cultural associations.
Think about colour associations when choosing your palette. Consider whether your colours are appropriate.
More information on colour associations from ThoughtCo (link opens in a new tab).
More detail on colour associations in charts from the Office for National Statistics (ONS) (link opens in a new tab).
Colour associations quiz
Match the colour to the description.
Colours to choose from:
- red
- yellow
- purple
- white
Descriptions to choose from:
- represents good luck in China but danger in western countries
- represents mourning in Thailand but royalty in western countries
- can represent unhappiness in India but peace in western countries
- represents courage in Japan but cowardliness in western countries
- Red represents good luck in China but danger in western countries.
- Purple represents mourning in Thailand but royalty in western countries.
- White can represent unhappiness in India but peace in western countries.
- Yellow represents courage in Japan but cowardliness in western countries.
Consistent colours
If you have a series of charts in a publication assign the same colour to the same variable in each chart.
If you change the way you use colours in a series of charts it becomes harder for users to follow the story.
It can also cause them to mistake one data series for another, especially if a user is skim reading.
Colours for axes and labels
We recommend using a grey shade for drawing and labelling axes. The grey should have a minimum 3 to 1 contrast ratio with a white background.
Gridline colours
Gridlines are useful, but they can make a chart more difficult to read if they are too dark.
In our opinion, if they are used, they do not need to meet the contrast requirements with the white background.
Data label colours
Data labels are the labels given to lines on line charts or segments on pie charts.
It is best to use black or very dark grey text for data labels on white backgrounds.
If lines or segments are very close together coloured text can be helpful. If you use coloured text you will need to consider make sure it meets the contrast requirements for text.
Also note: serif fonts can be hard for some users to read, so any text on charts should be in a sans serif font.
Demonstration video
Watch this video to see how to change the colours of chart elements in Microsoft programs
I’m going to talk through how to change the colour of elements in charts in PowerPoint. The same principles will apply if you are using Excel or Word or another Microsoft package.
First I’ve gone to the Analysis Function website and I’ve searched for ‘Data visualisation: colours’ which is our guidance on using accessible colours. I scroll down to the categorical data palette. Today we will be using the dark blue and the orange from this colour palette as these two colours have the greatest colour contrast between any two of the colours in this palette.
Going back to my PowerPoint, I’ve got a bar chart I’ve created but the colours are not correct at the moment. I can change these by right clicking on one of the bars and selecting ‘Format Data Series’. Now over to the paint pot in this new panel which has opened I can see the colour that is selected is a blue. We don’t want this blue, so I click ‘More Colours’. A new display comes up and we can see a box for ‘Hex code’ at the bottom. If I go back to the colours guidance, I can copy the hex code for dark blue. I can then paste this hex code into this box and click ‘OK’. This then auto updates all of the bars for me.
Moving onto the pie chart, we can do the same with the segments. First click on the pie chart. Next, right click and select ‘Format Data Series’. In the panel on the right, then click on the paint pot and use the drop down under ‘Colours’ to select ‘More colours’. I then paste in the dark blue hex code as I’ve still got that on my clipboard. Click ‘OK’. Click on the smaller segment and on the panel on the right click on the ‘Colours’ drop down again and select ‘More colours’. I then need to go back to colours guidance and copy the orange hex code. I can then paste this into the box at the bottom of the ‘More colours’ window and click ‘OK’. These segments are now updated and using our recommended colours.
Next, looking at the line chart, we have lines of orange and blue but they are not the ones we recommend. Start by clicking on the orange line and go to the ‘Colours’ drop down under the ‘Line’ section and select ‘More Colours’. I can then paste in the orange hex code. Next select the blue line and head to ‘More colours’ and paste in the dark blue hex code from the categorical colour palette.
Next we will change the colour of the gridlines, the text, and the axis. Select the y-axis, go to ‘Font colour’ and select black. Do the same with the x-axis. Next for the labels, highlight each and change the font colour to black. Finally, to fix the gridlines, double click on them and go to the colour drop down and select ‘More Colours’. I can then type in the hex code of the colour I want which is grey, hex code: #BFBFBF. Then click ‘OK’.
Hopefully this will help you to change your colours when you are creating your charts.
Choosing your own colour palette
If you want to choose your own accessible colour palette for charts please see the relevant section of our colours guidance (link opens in a new tab). We have a step-by-step guide and some useful links.
Using our colour palettes in Microsoft, R and Python
We have also created guidance on how to implement all of our accessible colour palettes in Microsoft, R and Python on different chart types.
Quiz
Try these questions to test your knowledge from this module
Download a plain text version of module 3 quiz (ODT, 10KB)