Using colour in maps

How to use colour accessibly in maps 

To use colour more accessibly in maps you should:  

• avoid using colour alone to convey meaning 
• choose the correct type of palette for the data you have – sequential, diverging or qualitative 
• limit the number of colours or shades on one map 
• choose colours to reflect the topic of the map and the meanings your users give to colours 
• aim for a contrast ratio of 3:1 for adjacent colours  
• check your colours are accessible for colour blind users 
• add a legend 

Avoid using colour alone to convey meaning 

We recommend using colour as an enhancement. Avoid using colour alone to convey meaning.  

Check if users can still interpret the map with the colour removed or if it’s printed in black and white. You should avoid using greyscale, however.  

Combine colour with other ways to convey information in the map such as: 

• different shapes and symbols 
• using patterns instead of solid colours 
• size and thickness of lines or shapes 
• labels  
• a legend (‘key’) to explain what colours, shades and patterns mean 

You should also give users another way to complete tasks if they cannot interpret a map.  

Choosing a type of colour palette  

Help users to interpret your map by using the type of colour palette that matches the type of data you have.  

The relationships between the colours or shades should mirror the relationships within your data.  

The 3 main types of colour palettes for data visualisation maps are:  

• qualitative – for distinct categories of data with no natural order (‘categorical data’)  
• sequential – for numeric data or data that has a natural order with higher and lower values, such as temperature  
• diverging – for higher and lower numeric values diverging from a meaningful middle point, such as a national average 

Qualitative palette 

Create a qualitative palette using a different colour for each category. Use colours that are visually distinct.  

Try to limit the number of categories in a single map because: 

• users find it hard to distinguish between many colours and shades, and your map will be harder to interpret 
• in a palette of more than 2 colours it’s difficult to ensure that all colours have a 3:1 contrast ratio with each other 

If you have lots of categories and colours you should: 

• check if you can reorganise your data and combine multiple categories  
• consider splitting a single map into a series of maps  
• aim for a 3:1 contrast ratio between colours you’ll use next to each other 
• add a light or dark border around areas of colour to increase contrast

Sequential palette  

Create a sequential palette using shades of a single colour. On a light basemap, use lighter shades for lower values and dark shades for high values.  

Because sequential palettes are shades of one colour, they will usually not meet the 3:1 contrast ratio for adjacent colours.  

To address this, you should think about:  

• combining colour with other ways to convey information – such as patterns rather than solid colours 
• adding a dark border around areas of colour to increase contrast 

Avoid using greyscale. It’s unlikely to have sufficient colour contrast and interferes with accessibility tools and plugins. 

Types of maps that use sequential colour palettes include:

• proportional symbol maps
• equal area cartograms
• heatmaps

You can use the Chroma.js colour palette helper to create sequential colour palettes.   

Diverging palette 

Create a diverging palette using 2 contrasting sequential palettes showing low to high values. They should diverge from a meaningful middle point which is represented by a paler, neutral colour.  

A diverging palette has a minimum of 5 colours.  

The middle value often represents a value such as:  

• zero 
• the average or median – for example, median age or median household income  
• a meaningful threshold – for example, the poverty line  

Types of map that use diverging palettes include: 

• choropleths  
• heatmaps 

You can use the Chroma.js colour palette helper to create diverging colour palettes.   

Choosing colours  

When you’re choosing colours for your colour palette, remember that users are using the map to find out information and complete a task.  

Users are unlikely to care if the colours of a map match your organisational brand.  It’s more important for colours to be accessible, logical and easy to interpret.  

You should: 

• use colours in line with your users’ associations and mental models 
• aim for a contrast ratio of 3:1 for adjacent colours  
• check your colours are accessible for colour blind users 

Meanings of colours  

Do not assume that users apply the same meanings to colours as you do. 

Be aware of the social and political associations of colours in different countries and cultures. For example, in the United Kingdom political parties are associated with certain colours.  

Test your map with users to check how they interpret the colours you’ve used. 

Colour contrast 

You should aim to: 

• give adjacent colours in maps a contrast ratio of 3:1  
• give text colour a contrast ratio of at least 4.5:1 against the background colour, unless it’s larger than 18 point (typically 24px) or 14 point with bold weighting (typically 18.55px) 

You can check contrast with the webAIM colour contrast checker.  

It’s likely that each colour in the palette will be alongside every other colour. Ensuring 3:1 contrast between all the colours in your palette may not be possible. For example, if you’re creating a sequential palette using shades of one colour.  

If you cannot meet colour contrast you should consider: 

• splitting the map into a series of maps 
• adding a lighter or darker outline around areas of the map to make them stand out  

You should also give users another way to complete tasks. For example, alternative content.   

Colour blindness 

Check the colours you’re using are accessible for people with different forms of colour blindness (‘colour vision deficiency’).  

Find out more about designing for colour blindness on GOV.UK.  

You can use the Chroma.js colour palette helper or Viz Palette to check your colours are accessible for colour blindness.  

Splitting a map into a series of maps 

If you have several categories or colours, consider splitting them into a series of maps. This will make the information easier to understand. For example, you can use a single colour in each map in a series. 

Arrange the series of maps in a logical order to tell the story, usually next to each other or in a grid. The maps should be easy to compare. Include alternative text and a caption. 

This is sometimes called a ‘small multiple’ or ‘grid chart’.  

Check that text is still readable if you reduce the image size to display maps together. 

Colour legends 

Add a legend to explain what the colours or shades in your map represent.  

A legend should have: 

• each colour or shade on a separate line 
• a short label beside each colour explaining the value or category it represents 
• a black border