Using colours in charts

Overview

Using the right colours will make sure your data visualisation is accessible, clear and intuitive. For certain charts, colour is a way to differentiate between categories of data. Examples of this are line charts and stacked bar charts.

Some visualisations use colour to represent quantitative (numerical) values. Examples are choropleth maps and heatmaps. Colour can also be used to highlight data within a chart.

There are several important things to consider when choosing the colours in your data visualisation, such as:

• using sufficient contrast with the background colour
• ensuring that the colours are suitably different from one another; this is especially important for users with colour vision deficiency
• using colour in a way that is intuitive and helps to convey the meaning of the data
• limiting the number of colours used; users may find it difficult to tell the difference between colours if too many are used

When to use a single colour

Certain chart types do not need colour to differentiate between categories. An example of this is a bar chart, where a single colour is used to represent the data.

At the Office for National Statistics (ONS), we use Ocean blue when only one colour is needed.

Where categories in a chart are grouped under subheadings, use the same colour for all groups.

An exception to this is where different colours are used for different categories or groups in multiple charts in a publication. Use the same colours for each group in each data visualisation to ensure consistency across the release.

Read more in Use consistent colours (opens in a new tab) 

Highlighting

For charts with a single main colour, use a different colour to highlight a category or interesting data point.

In the following example, a highlight colour helps the user to quickly see the UK data in the two charts:

When using colour to highlight a category, it is sometimes useful to provide an annotation explaining this.

Read more about how to use annotations in our annotations guidance

Multiple colours

Certain charts need multiple colours to differentiate between categories of data. Examples of this are line charts with more than one series and stacked bar charts.

In the following line chart example, different colours are used to differentiate between the lines:

In the following stacked bar chart example, different colours are used to show the segments within each bar:

Avoid using too many categories and colours. The more colours there are, the harder it is for users to perceive differences between them, especially for users with a colour vision deficiency.

Standard category colour palette

More colours can be used when using a colour scale to show ordered data. Read more in Categories with an order (opens in a new tab) 

To reduce the number of colours needed you may need to:

• show fewer series
• group categories into larger groups, for example, several small categories could be grouped into an “other” group
• consider which categories are shown on the axis
• consider an alternative chart type

More guidance on how to keep charts simple is available on the principles page

When using multiple colours to differentiate between categories, use the standard category colour palette.

Alternative category colour palette

The alternative category colour palette is a five-colour palette for Chartbuilder. It can be used when more variation between colours is needed. For example, in a line chart with crossing lines.

Highlight colour

The highlight colour is used in Chartbuilder to call attention to a certain category in a chart. It should ideally only be used with the blues and greens of the primary chart palette, as it is a complementary colour.

Adjustments for text

Three of the chart colours fall below the 3:1 colour contrast ratio threshold. This is to help with colour differentiation in the charts.

We use darker versions of these colours for text labels on charts.

Any text where the colour contrast ratio is below 4.5:1 should only be used for large text (opens in a new tab) .

Use consistent colours

If you have a series of charts, use the same colours for the same categories across all your charts. This makes it easier for users to follow the story and they will be less likely to mistake one data series for another.

In the following two example charts, the same colours are used for the same categories in both the pie chart and the line chart.

When using consistent colours, make sure the order of the categories follows our Ordering in charts guidance

Categories with an order

Charts will sometimes include categories that have a natural or usual order. For example:

• bad or very bad health, fair health, good health, and very good health
• low income, medium income, and high income

When using colours to show these categories, use colours on a scale.

Diverging categories

A diverging scale is where categories are in a natural order that extends from a neutral midpoint to two extremes. For example:

• very good, good, neither good or bad, bad, and very bad
• strongly agree, somewhat agree, neither agree or disagree, somewhat disagree, and strongly disagree

A common example of this is certain survey data or data above or below a threshold.

These categories should be visualised with a diverging colour palette. Diverging colour palettes will extend to two colour scales, one for each of the extremes, and may have a neutral middle colour.

The following chart uses a diverging colour palette to show data on health outcomes, where the categories range from “very bad” to “very good”:

Read more about when to use the natural order of categories in our ordering in charts guidance

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)