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:
As well as using these tools, test colour contrast with people of all abilities.
If you have a question about colour, contact email@example.com.
Colours that have a defined use
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.
White space can help group elements on a page and structure information. Used well, white space makes content easier to read.
#282828 (dark grey) is our main text colour. Use a colour contrast checker when using this colour on backgrounds other than white.
Try to use borders only where absolutely necessary. Where possible use typography and the white space around content to help structure a page.
Other colours you can use
You can use other colours to:
- draw users’ focus to particular content areas
- emphasise content so that it's read in an order that makes sense to users
- give the impression of depth and layering — this can help structure content in a helpful way for users
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.