Yellow 1

Yellow 2

Yellow 3

Yellow 4

Yellow 5 (Base)

Orange 1

Orange 2

Orange 3

Orange 4

Orange 5 (Base)

Green 1

Green 2

Green 3

Green 4

Green 5 (Base)

Green 6

Green 7

Red 1

Red 2

Red 3

Red 4

Red 5 (Base)

Red 6

Red 7

Red (Brand)

Blue 1

Blue 2

Blue 3

Blue 4

Blue 5 (Base)

Blue 6

Blue 7

Blue 8

Grey 1

Grey 2

Grey 3

Grey 4 (Base)

Grey 5

Grey 6

Grey 7

Grey 8

Grey 9




Don't rely on colour alone

Lots of people can’t tell the difference between certain colours therefore you shouldn't rely on it.

  • Along with colour use shape, tone and position
  • The design should work in greyscale
  • Colour should add to the usability rather than being crucial


Having enough contrast is more important than ever, with increasingly mobile and shiny screens.

We aim to comply with WCAG 2.0 contrast ratio - AA standards.

Is there enough contrast?

A few quick ways to judge whether your design has sufficient contrast

  • Squint

    If anything disappears, think about the contrast.

  • Stand back

    Stand back from the design and you'll be able to judge the overall hierarchy and flow better.

  • Use a tool

    There are plenty of tools to test contrast. Try Colour Contrast Analyser




A division with a dark grey background colour.

A paragraph that has a light grey text colour.