Colour

Palette

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

Black

White

Guidelines

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

Contrast

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

Code

...

E.g.

A division with a dark grey background colour.

A paragraph that has a light grey text colour.