Colour palette live
White and greys
Yellows
Greens
Green blues
Blues
Pinks and Purples
Reds and Oranges
Design and content
These colours have been contrast tested as background colours with white or grey (#282828) text. Use a colour contrast checker when using any other colour of text.
Use Co-op’s colour palette:
- to draw users’ focus to particular content areas
- to give emphasis, depth and highlight to our work where needed
- in the right context — for example don’t use large amounts of colour in a form, it can distract the user
- with restraint — users can read content better when we use limited colour
- to help convey meaning to interaction patterns, for example, for mandatory form fields. Never use colour alone to do this.
- to communicate the Co-op brand — see the brand guidelines
The Co-op brand blue is only used on the Co‑op logo. Never use brand blue as text or as a background colour — it’s difficult for those with low vision to read on screen.
Accessibility
Think about how your colour choices can affect legibility and accessibility — read WCAG 2.0 specifications on using colour. To be legible, text and background colours must have a minimum contrast between them. You can check colour contrasts online using:
- Web Aim’s Colour Contrast Checker
- Color Oracle (free colour blindness simulator)
- As well as using these tools, test colour contrast with people of all abilities.
If you have a question about colour, contact design@coopdigital.co.uk.
For more information see our general guide on accessibility.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.