White and greys
- Light grey
- Mid grey
- Dark grey
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.
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 firstname.lastname@example.org.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.