Colour

We use colour to guide people and aid communication.

We do not:

  • rely on colour alone to convey meaning — consider people who are colour blind
  • use colour just for decoration — we apply it only when it’s helpful to the user
  • use blue text for anything other than links

We’re developing further guidance on using colour along with a secondary colour palette. We’ll update this page when it’s ready.

If you have a question about colour, contact design@coopdigital.co.uk.

Brand blue

Our brand blue should only be used for the logo. Do not use it as text or as a background colour. It has poor contrast and can be difficult for those with low vision to read on screen — we design for everyone.

Stylised text used in logos is exempt from colour contrast requirements.

#00b1e7

Use only for the Co-op logo.

Example

Co-op

Text colour

Our recommended text colours meet WCAG 2.0 web accessibility standards for text and background colour combinations. You should make sure that the colour contrast on body text is 4.5:1 (AAA) and 3:1 (AA) on large text (24px).

If you are unsure about any of the colours you are using, there are some good tools you can use to check them:

Using a colour contrast checker is never a substitute for testing with real people, of all abilities.

#282828

Use for all main content copy.

Page colours

Only use white as a background colour.

#fff

Main background colour for pages.

Border colours

#c4c4c4

Use for borders.

#6e6e6e

Use for borders.

Button colours

#118156

Primary button colour.

#149865

Primary button hover.

Example

#374c63

Button colour.

#496584

Button hover.

Example

Find out how we design buttons.

Feedback

Did you find this useful?