Introduction to colour

Colour is an important consideration in design. Use colour carefully, it should reinforce the main messages in your data.

Don’t rely on colour alone to communicate the stories in your data. The important messages communicated by the data must be clear if the graphic is viewed in black and white or if the user is colour-blind.

When considering your colour choices look at the relationships present in the data. It should be used to group related items and command attention. Contrasting colours can be used to focus attention on differences, or interesting areas, within the data.

A safe starting point is to use subdued, pastel colours or greyscale to communicate the majority of your information.

Using colour in bar charts

For categorical data that can’t be organised into broad groups use the same colour and shade.

If the categorical data can be grouped use colour to help highlight this relationship.

Colour by broad category

Use colour when sub-categories are not shared across broad categories to show hierarchy in the data

Colour by year

Use colour when sub-categories are common across broad categories to show secondary relationships in the data.

Using colour in line charts

Use colour to distinguish between lines on a line chart. If the data has an implied order, for example age ranges, use different shades of one colour, or colours with different luminance values, but the same hue and saturation.

If the data has no implied order, for example male and female, different colours (hues) can be used.

Lines have a smaller area than bars, which means fewer colours can be distinguished. Try to avoid using more than four shades of one colour on a line chart without using another mechanism to differentiate between them. Using colour and texture can be particularly powerful.

Where data categories can be ordered

Where data categories have no order

Using colour in pie charts

Different shades of one colour, or colours with different luminance values, or different colours (hues) can be used in pie charts.

Choosing the right colours

Always ensure that people who can’t perceive colour or see it in a different way can still understand the information.

If you need to use colour to convey information make sure that colour-blind safe colours are used. Use a colour-blind simulator, such as Vischeck, to test your colours to see whether they are colour-blind safe.

Colour palettes should be chosen to maximise the difference in perception between the colours and also appear distinct to people with varying types of colour blindness.

A good starting point is to choose colours that are distinct from the background and each other.

When choosing a colour palette tools like Colorbrewer can provide a good starting point. Palettes for use in ONS will be added here in the future.

Tools

Use these tools to help ensure your colours are accessible:

  • Colorbrewer is a useful basic tool that allows you to choose 3 to 12 colours according to specified requirements, for example colour-blind safe or diverging colours
  • Colorhexa allows greater control over choosing optimally distinct colours, a colour-blind simulator shows how colours appear to people with different types of colour blindness
  • Adobe Illustrator allows you to simulate different kinds of colour blindness

Colour association

Certain colours have different meaning associated with them, which will vary dependent on context.

For example:

  • red: caution, anger, love, negative (in finance), hot
  • orange: warm, autumn
  • yellow: happy, fun, young
  • green: nature, calm, good luck
  • blue: stability, professional, cold, trust, intelligence
  • purple: wealth, mystical, decadent
  • brown: rustic, practical, warm, vintage
  • white: sterile, innocence, peace, truth, cleanliness
  • black: sophistication, death, night, contemporary
  • multicolour: international, all inclusive, multicultural

Where appropriate use colours that are naturally associated with the categories they are representing.

However, you need to be aware of colour association with potentially sensitive topics, for example, political parties. The use of a particular colour can change the context of what you are presenting.

Branding with colour

Colour can be used to show the data are part of a particular brand or collection. For example, the 2011 Census used a purple colour scheme and this was used in the design of their charts.

But….

Don’t be constrained to only using your corporate or brand colours. Use the colours that are most appropriate to highlight patterns in the data and can be perceived the most clearly by all users.

Accessibility and colours

Approximately 1 in 12 men (8%) and 1 in 200 women suffer from colour blindness. There are many different forms of colour blindness:

Normal Vision

Deuteranomaly

Protanomaly

Protanopia

Deuteranopia

Tritanopia

Tritanomaly

Achromatopsia

 

Use these three helpful rules when choosing your colours

“Get it right in black and white”

Make sure your design works in greyscale (black and white) before adding in colour. Don’t assume colours will signal meaning when used on their own.

“The safest hue is blue”

The richest colour across all types of colour blindness is blue, therefore blue is often a good colour choice.

“Red and green should never be seen”

Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.

Colour combinations

Avoid colour combinations that are especially hard for colour-blind people to see.

Use various shades of a single colour, instead of multiple colours to help avoid colour blindness issues. This can be done by varying the luminance or saturation and holding the hue constant

Colour-blind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use bright colours which are easier to distinguish rather than dim ones, which tend to blur into one another.

Some mildly colour-blind people are able to see a colour, but only if there’s a sufficient “mass” of it. Use larger areas and thicker lines if possible.

Using red and green

If you’re using red to signal “warning,” or “caution,” and green to signal “approval” or “correctness” consider adding a symbol to make sure colour-blind users can still understand the message.

Traffic lights use red and green, but the position of the lights communicates “stop” or “go”, even if the colours can’t be seen.

Normal vision

Appearance for someone with red-green colour-blindness

When the use of red and green is unavoidable, for example RAG (red, amber, green) ratings make sure that colour isn’t the only method of communication.

Consider representing RAG ratings in the same way:

Further information about colour theory

Colour theory is complex and is based on colour models and colour spaces.

Colours are defined in many ways, three of the more common ways are:

  • RGB (red, green, blue) – which describes the type of light emitted to produce a colour
  • HSL (hue, saturation, luminance) – commonly used by artists
  • CMYK (cyan, magenta, yellow, black) – used in printing to describe the inks required to produce a given colour

This colour can be defined in the following ways:

RGB(35, 165, 142), HTML traditionally uses hexadecimal conversions of the RGB value to define colour. For example #23A58E

HSL(169.38°, 78.79%, 64.71%)

CMYK(77.75%, 11.45%, 54.28%, 0.34%)

You can use at least one of these methods to define colour in most software packages.