Data visualisation: colours

Policy details

Metadata item Details
Publication date:23 November 2021
Author:Analysis Function Central Team
Who this is for:Anyone producing data visualisations in government
Type:Guidance
Contact:Analysis.Function@ons.gov.uk

Introduction

Colour can change how we see information in charts. When colour is used well it can enhance statistical content and make it clearer. When colour is used badly it can confuse users. Your content may even fail the accessibility legislation that applies to public sector websites.

This guidance sets out what to consider when using colour in charts.

It also suggests accessible colour palettes to use with categorical and sequential data, and in focus charts.

Back to top of page

What to consider when using colour in charts

Limit the number of colours you use

Limiting the number of colours you use in a chart makes them stand out. This is useful because colour helps the brain quickly identify differences. Using lots of colours makes this harder.

Think carefully before you introduce additional colours into a graph. Ask yourself:

  • Do you really need the colours?
  • Do they make your message clearer?

You should only use different colours when they show helpful differences in the data. When people look at a chart with lots of colours, they try to work out what those different colours mean. If your colours suggest meanings that are not there the user will waste time and effort trying to understand them.

When you have categorical data that cannot be grouped, use a single colour. The user is much more likely to compare the bars when they look alike than when they look different. See the first example in the Office for National Statistics’ (ONS) guidance on using colour in bar charts.

Use colour consistently

If you have a series of charts, assign the same colour to the same variable in each chart.

If you change the way you use colours in a series of graphs 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. See guidance from ONS on using colour to connect information.

 

Consider colour associations

People link certain colours to certain things. For example, people tend to link blue with water and green with grass. Using these types of links in data visualisations can help people understand information faster. If you use colours that go against these associations, it might take users longer to understand your chart. For example, it would take users longer to understand you were talking about grass if you used the colour red to represent it.

Colours can also have cultural associations. We may react to these consciously or unconsciously. These associations vary across countries and groups.

Think about colour associations when choosing your palette. Consider whether your colours are appropriate.

More information on colour associations from ThoughtCo.

More detail on colour associations in charts from ONS.

 

Use a plain background

Never use an image as a background. This can make charts difficult to see. Charts that use an image as a background are also likely to fail the accessibility legislation.

We recommend using white as a background colour. All our suggested colour palettes are based on this.

There are some accessibility issues with using white as a background colour. Some users may find a white background difficult to look at because of glare or the high contrast of colours against it. On the other hand, other users prefer a white background because they need the high level of contrast it provides.

A perfect solution would be to have data visualisations that can be fully customised to meet specific user needs. As this is not possible at the moment we recommend a white background because it provides a helpful ‘anchor’ for the visual system in general.

 

Consider low vision and colour blindness

Low vision

When we talk about the accessibility of colours in data visualisations we tend to concentrate on colour blindness.

But we should also consider people with low vision. This can be caused by conditions like glaucoma and cataracts.

You can find out more about the difference between low vision and colour blindness in this article on visual disabilities.

Keeping a 3 to 1 contrast ratio between adjacent colours (as set out in success criterion 1.1.1) is important for people with low vision.

Colour blindness

Colour blindness affects around 8% of men and 0.5% women. It can come in many different forms. You can find more information about types of colour blindness in ONS guidance on using colours.

The section on ‘Choosing your own colour palette‘ gives details of some useful tools for checking palettes for colour blindness issues.

We have checked our suggested colour palettes for different types of colour blindness. Guidance related to this is available in each section.

 

Consider your colours in greyscale

It is a good idea to check your charts can be understood in greyscale.

This is because:

  • it is a good way to check if your chart relies on colour to be understood
  • there is still a need for some users to print in black and white
  • seeing in greyscale is a specific type of colour blindness

Check how your charts look by using print preview and selecting ‘greyscale’ or ‘black and white’.

We have checked our suggested colour palettes to see how they look in greyscale. Guidance related to this is available in each section.

Do not rely on colour alone

Colour should not be used as the only way to communicate information. This is stated in accessibility success criterion 1.4.1.

See the section on accessibility legislation for more information.

Use the SVG format

Everything on a chart is easier to see if you use the SVG format for images of charts.

Our guidance on ‘Making analytical publications accessible‘ has more information on SVG images.

Back to top of page

Accessibility legislation

Accessibility legislation relevant to public sector websites came into force in September 2020. This means all content on these websites must meet the A and AA success criterion listed in the Web Content Accessibility Guidelines 2.1.

Five of these are relevant to using colour in charts.

Non-text contrast

This is criterion 1.4.11 (AA level). It states:

“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 of graphics is essential to the information being conveyed”.

This means that all adjacent colours need at least a 3 to 1 contrast ratio. This applies unless the presentation is “essential” for communicating a message.

This colour contrast checker is a useful tool for understanding this success criterion.

Use of colour

This is criterion 1.4.1 (A level). It states:

“Colour is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element”

This means we should help users understand charts without relying only on colour.

To do this we should avoid using legends in line charts and pie charts. Instead, label the lines and segments on the chart.

If you need to use a legend for stacked or clustered bar charts, order the legend to match the chart. This does not completely solve the problem but it can help users work out the series labels without relying fully on colour.

Non-text content

This is criterion 1.1.1 (A level). It states:

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”

This means all data visualisations need alternative text that communicates the message of the chart. You need this even if the chart colours meet the contrast requirements.

More detail on how to provide alternative text is available in our ‘Making analytical publications accessible’ guidance.

Contrast (minimum)

This is criterion 1.4.3 (A level). It states:

“The visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1”

Text needs a higher colour contrast ratio because it needs to be read and not just seen.

Large text needs a minimum colour contrast of 3 to 1. Large text is classed as at least size 18 or at least size 14 if bold. But remember, if you publish your charts as images the text will be resized. So, we advise sticking to a 4.5 to 1 colour contrast ratio for text whenever possible.

This colour contrast checker is useful for understanding this success criterion.

Sensory characteristics

This is criterion 1.3.3 (A level). It states:

“Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.”

This means if you refer to a chart in your text you should not use colour or shape to talk about the chart. For example you should not refer to ‘the green line’ or ‘the blue bar’. If you do, you are relying on users seeing colour in the same way that you do and this may not be the case.

It also applies to the use of legends as they rely on users being able to match chart elements using colour.

Back to top of page

Our colour palettes

We have developed three colour palettes for use in charts.

All our palettes take into account the general considerations set out in this guidance and the accessibility legislation.

All our palettes are designed to be used with a white background.

The palettes are based on the colours in the Government Digital Service design system. But we have made some slight changes to increase the colour contrast.

Colours are given in three different ways:

  • Hex code
  • Red Green Blue (RGB) code
  • Cyan, Magenta, Yellow and Black (CMYK) percentages

Contrast ratios are also given for all palettes. These measure the difference in brightness between two colours.

Contrast ratios are important because they are mentioned specifically in the accessibility regulations. See the section on accessibility legislation for more detail.

Back to top of page

Categorical data colour palette

What is categorical data?

Categorical data can be divided into groups or categories by using names or labels.

Palette table

Note: the cells in the “Example of colour” column may appear blank to screen reader software. They contain a colour fill, but no data.

ColourHex codeRGB code CYMK codeExample of colour
Dark blue#12436D(40,161,151)(83, 39, 0, 57)
Turquoise#28A197(244,106,37)(75, 0, 6, 37)
Dark pink #801650(128,22,80)(0, 83, 38, 50)
Orange#F46A25
(18,67,109)(0, 57, 85, 4)

Contrast ratios

Numbers in the contrast ratio table give the ratio to 1 between the colours in the relevant row and column. These are important because of the accessibility legislation.

Colours WhiteDark blueTurquoiseDark pink Orange
White[no ratio]10.243.169.773.02
Dark blue 10.24[no ratio]3.231.043.38
Turquoise 3.163.23[no ratio]3.081.04
Dark pink 9.771.043.08[no ratio]3.22
Orange3.023.381.043.22[no ratio]

Information about these colours

  • All colours have a contrast ratio of at least 3 to 1 against white.
  • When used in the order presented in the list, all adjacent colours have a contrast ratio of at least 3 to 1.
  • All colours have passed our checks for colour blindness – see the section on ‘Choosing your own colour palette‘ for more information.
  • When used in the order presented in the list, all adjacent colours appear distinct in black and white.

Why only four colours?

We recommend a limit of four categories as best practice for basic data visualisations. More than four series can make a chart too cluttered.

If you feel you have to show more than four series on a chart we recommend the following colours: dark grey with hex code: #3D3D3D and light purple with hex code: #A285D1. These colours have enough contrast with a white background and, when used in order, they have enough contrast between adjacent colours.

Using the categorical colour palette

Simple bar charts

Use a single colour for all bars in vertical column charts and horizontal bar charts where there are no groups to highlight. We recommend using the first colour in the palette. We call this colour ‘dark blue’. We recommend dark blue because it:

  • has the highest contrast ratio with a white background
  • works for different types of colour blindness
  • works in greyscale

The gap between the bars should be slightly narrower than the width of a single bar. Unless you are presenting a histogram. Histograms should have no gaps between bars.

Example: Profit for four fictional companies in 2020

Bar chart showing fictional data on profit

Clustered and stacked bar charts

We advise that clustered and stacked bar charts should have no more than four series.

We recommend using our suggested colour palette in the order given in the list to make sure adjacent colours have enough contrast. It will also mean the colours will work for different types of colour blindness and in greyscale.

In clustered bar charts the gap between the clusters should be wider than a single bar. If you’re presenting discrete data in clustered bar charts, leave a small gap between the bars in each cluster to increase contrast and help users work out the meaning of the colours.

Accessibility and use of legends

Stacked and clustered bar charts both require the use of legends.

Make sure the order of the legend matches the order of the series in each cluster. This will help users match the labels to the series. However this does not fix all the accessibility issues as the labels still sit away from the bars. At the moment we do not have a perfect solution for matching bars to data labels without using colour in some way.

Our advice is to provide a plain text version of the chart.

The HTML horizontal bar charts on GOV.UK allow users to toggle between a chart or plain text table view. However, be aware that at the moment the tables do not follow all our best practice guidance for tables. Also, the colours used in these charts do not meet the colour contrast ratio requirements. We are speaking with the Government Digital Service (GDS) about this and hope to resolve these issues soon.

Given the options available at the moment, this toggle functionality is still a good way to provide a plain text table view for now. The charts on Explore education statistics also have this toggle functionality.

If you can’t use the toggle to table functionality, we recommend providing a plain text version of clustered and stacked bar charts through a text description or a table of data. This should be in the body text of the page whenever possible. However, large tables of data may be better provided in an accessible data download file or linked to in an annex.

Clustered bar chart example: Number of apples, bananas, pears and pineapples found in four shops (fictional data)

 

Shop numberApplesBananas PearsPineapples
Shop 133302110
Shop 238251810
Shop 331201810
Shop 444251910

Stacked bar chart example: Percentage of each house type within each ownership situation (fictional data)

 

House typeOwns outrightOwns with mortgageRentsNot stated
Detached33302116
Semi-detached31203811
Terraced38251918
Flat44251912

Line charts with one series

We recommend using the first colour in the palette called ‘dark blue’. We recommend dark blue because it:

  • has the highest contrast ratio with a white background
  • works for different types of colour blindness
  • works in greyscale

Make sure you choose a suitable level of thickness for the line. Some people who have mild colour blindness are able to see a colour, but only if there is enough ‘mass’ of it. The exact thickness you need will depend on how you create your image.

Example: Revenue of a fictional company, 2010 to 2020

Line chart showing fictional data

Line charts with two series

We recommend using the colours from the palette called ‘dark blue’ and ‘orange’. This is because these colours have the greatest contrast between them. They also work for different types of colour blindness and are distinct in greyscale

Remember to be careful with the cultural associations of colour. Orange in particular can have strong cultural and political associations in some settings.

Label the lines directly rather than using a separate legend. This means that users will not have to rely on colour to match the labels to the series.

If the order of the series is important, use the colour palette for sequential data.

Example: Annual revenue of two fictional companies, 2010 to 2020

Line charts with more than two series

As with stacked and clustered bar charts, we advise that line charts should have no more than four series.

It is difficult to choose colours for line charts with more than two series.

This is because it is not possible to have a chart colour palette of more than two colours where all colours have at least a 3 to 1 contrast ratio with:

  • the white background
  • all other colours in the palette

In stacked and clustered bar charts this is not an issue because the series always stay in the same order. This means we can control what colours are next to each other and make sure they have a high enough contrast ratio.

But lines do not always stay in the same order. So, it is not always possible to make sure adjacent colours have at least a 3 to 1 contrast ratio.

This means that it is not possible to provide a palette for line charts with more than two series that would meet the contrast ratio requirements. So, you should only use line charts with more than two series when they are essential to getting information across. This will help you meet accessibility success criterion 1.4.11.

It is possible to design a colour palette for line charts with more than two series which would work:

  • for different types of colour blindness
  • in greyscale

However, this would involve using colours that have a less than 3 to 1 contrast ratio with the white background. Remember that some people with visual disabilities may not be able to see these lines at all.

So, there is no perfect solution to this problem.

Our advice is:

Use our suggested palette or another that makes sure all lines have a 3 to 1 contrast with the white background

We have chosen to prioritise the colour contrast ratio with a white background. This is because this will help many people see the lines, even if they cannot tell the colours apart.

Label the lines instead of using a legend
Provide a plain text version of the chart

A plain text version can be provided through a text description or a table of data. Whenever possible it is best to put this in the body text to make sure the information is available to all users.

See our ‘Making analytical publications accessible‘ guidance for more information on this area.

Note: this is best practice for all images of charts, but it is very important for line charts with more than two series.

Consider a different approach

Other approaches:

  • A small multiples plot (see figure 2 in this statistical bulletin) – these can make it much easier to see differences in each series.
  • Using texture to present the lines – but be aware that this can be difficult to do well and textured lines may be misinterpreted as they are often used for projections, forecasts or targets.
  • Add shapes to the data points on the lines – but be careful not to overuse these as they can make a chart cluttered
  • Using a focus chart – you can find more information on these in the ‘Focus charts colour palette’ section.

Example: Annual revenue of four fictional companies, 2010 to 2020

A text description can be found following this image

YearCompany 1
Revenue
(£million)
Company 2
Revenue
(£million)
Company 3
Revenue
(£million)
Company 4
Revenue
(£million)
201058504243
201160573837
201254554553
201357514253
201454446028
201556553555
201654573630
201758514332
201857433223
201954435042
202059514947

Pie charts

You should only use pie charts in certain circumstances. Please see our ‘Data visualisation: charts’ guidance.

Pie charts with two variables

When pie charts present two variables we recommend using the dark blue and orange colours from our palette. This is because these colours have the greatest contrast. These colours also work for different types of colour blindness and are distinct in greyscale.

Be careful with the cultural associations of colour. Remember that orange can have strong cultural and political associations in some settings.

Put a white border around each segment to enhance the contrast.

Label the segments directly rather than in a separate legend. This helps users to match the labels to the variables without relying on colour.

Consider adding value labels to help users understand the chart.

Example: Questions in an exam by whether they were answered

Pie chart showing fictional data

The example shows a pie chart with two segments, one is labelled ‘Answered (82%)’, the other is labelled ‘Not answered (18%)’.

Pie charts with more than two variables

As with all charts, all colours you use in a pie chart need to have at least a 3 to 1 contrast ratio with the white background. But for pie charts with more than two variables, each colour also needs to have at least a 3 to 1 contrast ratio with the two other colours it will be next to.

This is possible when you have two or four variables because you can alternate darker and lighter colours. This allows you to make sure adjacent colours have the level of contrast they need. It is not possible when you have three or five variables.

Note: we would not recommend using a pie chart with more than five variables.

Advice for pie charts with four variables
  • Use our suggested palette, using the order given in a clockwise direction, starting from the 12 o’clock position.
  • Give each segment a white border to maximise contrast.
  • Label the segments directly instead of using a legend.
  • Consider adding the percentage represented by the segment to the segment label.
Advice for pie charts with three or five variables

Follow the guidance for pie charts with four variables and provide a plain text version of the chart as a text description or a table of data. Whenever possible it is best to put this in the body text to make sure the information is available to all users.

See our ‘Making analytical publications accessible‘ guidance for more information on this area.

Note: providing a plain text alternative is best practice for all images of charts. But it is very important for pie charts with more than two variables.

Example: Responses to the “What is your religion?” question on the 2011 Census

 

Table of data
Response groupPercentage
Christian59.3
No religion 25.1
Other8.4
Not stated7.2

Source: 2011 Census for England and Wales 

Back to top of page

Sequential data colour palette

What we mean by sequential data

Sequential data is any sort of data where the order has some meaning. For example, age groups.

Choosing colours for sequential data

When you are presenting sequential data, it is best to use a single hue, or small set of closely related hues. You should change the lightness from pale to dark, rather than alternating between hues. Colours should also progress in the direction a user would expect.

For example, on the UK government website for data on coronavirus (COVID-19) there is a visualisation of vaccine doses. In this visualisation, the colour used to represent the number of vaccine doses gets darker as we move from no dose to three doses.

Palette table

Note: the cells in the ‘Example of colour’ column may appear blank to screen reader software. They contain a colour fill, but no data.

ColourHex codeRGB codeCYMK codeExample of colour
Dark blue#12436Drgb: (18, 67, 109)cymk: (36, 16, 0, 57)
Mid blue#2073BCrgb: (32, 115, 188)cymk: (61, 29, 0, 26)
Light blue#6BACE6rgb: (107, 172, 230) cymk: (48, 23, 0, 10)

Contrast ratios

Numbers in the contrast ratio table give the ratio to 1 between the colours in the relevant row and column. These are important because of the accessibility legislation.

ColoursWhiteDark blue Mid blueLight blue
White[no ratio]10.244.952.42
Dark blue 10.24[no ratio]2.064.22
Mid blue 4.952.06[no ratio]2.04

Information about these colours

These colours pass our checks for colour blindness and appear distinct in greyscale.

But this palette is restricted to tints of one colour. This means that:

  • neither dark or light blue have a high enough contrast with the mid blue to meet the contrast ratio requirements
  • only the dark and mid blue have the required level of contrast with a white background

As a result, you should only use this approach when it is essential to communicate your message. This will help you meet accessibility success criterion 1.4.11.

Using the sequential colour palette in charts

Because of the problems with contrast ratios in this palette our advice is to:

  • label the lines instead of using a legend in line charts
  • provide a plain text version of all charts that use this palette

See the subsection on line charts with more than two series in the categorical data colour palette section for more information on this advice.

Example: Percentage of each age group who live in a flat, 2010 to 2020 (fictional data)

line chart with three series, fictional data about percentage of age groups living in flats over time

Table of data
YearAge group:
21 to 40
(%)
Age group:
41 to 60
(%)
Age group:
61 to 80
(%)
201027718
2011532420
2012897411
201344403
2014523929
201548453
2016831732
2017585127
2018362812
201946408
2020576730
Back to top of page

Focus charts colour palette

What we mean by focus charts

On focus charts, colour is used to highlight specific elements to help users understand the information.

Palette

Note: the cells in the ‘Example of colour’ column may appear blank to screen reader software. They contain a colour fill, but no data.

ColourHex codeRGB codeCYMK codeExample of colour
Dark blue#12436Drgb: (18, 67, 109)cmyk: (83, 39, 0, 57)
Grey #BFBFBFrgb: (191, 191, 191)cmyk: (0, 0, 0, 25)

Contrast ratios

Numbers in the contrast ratio table give the ratio to 1 between the colours in the relevant row and column. These are important because of the accessibility legislation.

ColoursWhite Dark blue Grey
White [no ratio]10.241.83
Dark blue 10.24[no ratio]5.57

Information about these colours

The colours have passed our checks for colour blindness and appear distinct in greyscale.

The light grey has a high contrast with the dark blue. But its contrast ratio with the white background is below the required 3 to 1 level. This means you should only use this approach when it is essential to communicate your message. This will help you meet accessibility success criterion 1.4.11.

We have chosen this light grey because we want these lines to be less obvious. This helps us emphasise the series we are interested in.

We would also suggest making the line showing the series of interest slightly thicker than the others. This will also help to make it more prominent.

Using the focus chart palette

Example: Highlighting the UK line on a European chart

Chart showing cases of COVID-19 per million for several European countries. The data shows that for this period the case rate in the UK was relatively steady compared with the rising case rates in Austria, Belgium and the Netherlands. Although it was higher than the case rate in France, Italy and Spain.

The example shows a line chart where most of the lines are a light grey. The line showing the UK’s time series is in dark blue and stands out from the rest.

Back to top of page

Colours for axes and labels

You should only use colour in the foreground items of charts, such as lines and bars.

Drawing and labelling axes

We recommend using a grey shade for drawing and labelling axes. The grey you use should have a 3 to 1 ratio with a white background.

The Microsoft default grey for axes and axes labels has a hex code of #595959. This is fine.

Grid lines

Grid lines are useful, but they are not needed to understand a chart. Remember that 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 3 to 1 colour contrast ratio with the white background.

The Microsoft default colour for grid lines has a hex code of #D9D9D9. We think this is fine to use.

Data labels

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. If lines or segments are very close together you may decide it would be helpful to colour the text to match the line or segment. The colours in categorical data colour palette can be used for text on a white background if the font is large enough. But remember that as images of charts often get resized this will change the size of the text. See the accessibility legislation section of this guidance for more information on using colours for text.

Other pointers

All chart text and labels should be in a sans serif font. Your text should be at least size 12 when you are creating the chart image.

Some people find serif fonts, such as Times New Roman, hard to read. The British Dyslexia Association recommends not to use them.

Back to top of page

Choosing your own colour palette

While we have suggested a standard palette to use, there may be reasons for using different colours. Follow these five steps if you’re choosing your own colour palette.

Some organisations will have their own branding schemes. If you have an existing palette you want to test for accessibility, skip step 1 and use steps 2 to 5 to test it.

Step 1: Use a tool to find a palette

Use online tools like colourbrewer and colourhexa to help you find a suitable palette.

If you have it, Adobe Illustrator can also help you choose a palette.

Step 2: Remember criteria 1.4.1 and 1.1.1

Visualisations should not rely only on colour to communicate information.

Make sure your visualisations have a text alternative to communicate the message of the chart. You should do this even if the colours meet the contrast requirements and work for the main forms of colour blindness.

More information on making images of charts accessible.

Step 3: Check the contrast ratios of adjacent colours

Remember: adjacent that colours need a 3 to 1 contrast ratio. This is needed to pass the accessibility legislation.

Test the contrast ratios of colours using the colour contrast checker from WebAIM.

If you are using R, you can also do this using the coloratio package.

Step 4: Check colours for colour blindness compatibility

People with colour blindness find it hard to identify some colours. They also find it hard to tell some colours apart.

You can use a variety of tools to check colours against the main types of colour blindness:

  • Adobe’s colour accessibility tool gives a pass or fail indication for up to five colours. It also visualises where they sit in a colour wheel.
  • The DavidMathLogic site gives an immediate visualisation of the main types of colour blindness.
  • Coblis, a colour blindness simulator, allows you to upload an image and check it against the main types of colour blindness.
  • If using R, use the ColorBlindCheck package to visualise colours from a series.
  • If you have it, Adobe Illustrator allows you to simulate different kinds of colour blindness

Step 5: Check your colours work in black and white

This is less important if the visualisation is only going to be in digital form. However, if you are producing something that may be printed, you should check your colours work in black and white. Use print preview to check your palette.

If using R then the ‘ColToGrey’ function from the DescTools package can change the colour palette for you.

 

Back to top of page

Related links

WebAIM content

Checking for colour blindness

ONS guidance

Analysis Function guidance

Other guidance

Tools for choosing your own colour palette

  • Colorbrewer can help you visualise and choose your own palette
  • Colourhexa gives useful information on colours
  • Adobe Illustrator has built in tools that can help you choose a suitable colour palette

Other links

Back to top of page

Any questions?

If you have any further questions you can:

Back to top of page
  • If you would like us to get in touch with you then please leave your contact details or email Analysis.Function@ons.gov.uk directly.
  • This field is for validation purposes and should be left unchanged.