Colours

Accessibility

All colours and colour combinations must pass a colour contrast ratio of 4.5:1.

All colours in our palette have been tested for accessibility. Each colour on this page has a link to the contrast test for that colour.

Brand colours

Co-op blue

Only use Co-op blue with the brand logo. Co-op blue does not meet colour contrast standards for text, graphical objects or user interactions. For example, you should not use it as an underline to highlight the page a user is currently on.

Co-op blue can be used as a background colour for the Co-op logo when the logo you’re using is white, for example, on our app icons.

Deal red

Deal red is like the red we use in Co-op stores and in advertising materials to highlight a price reduction or offer.

Use it sparingly to draw the eye to particular offers or discounts.

Do not use it as a block of colour.

User interface colours

Link colours

For most links, use the colours shown here.

If you’re using a link on a background colour, then the link text and underline must be black or white. This is to maintain the correct colour contrast.

Links inside an area of navigation, like the main header on a website, may also appear in a different colour (normally the same colour as the text). This is because these links are in context to something that a user can recognise as navigation.

Always apply the focus ring. The focus ring is used by keyboard users who do not have a cursor to tell them where they are on a page.

You should usually use the purple link focus colour. Change this to white or black if the link is on a background colour where the purple would not meet colour contrast standards.

Go to the design guidelines on links.

Button and form colours

There are 4 button colour combinations available:

• primary green
• primary white
• secondary blue
• secondary grey

Go to the design guidelines on buttons.

If the button is on a background colour, use white as the button colour.

Do not put a form on a brightly coloured or very dark background.

Text colours

The main text colours are 'text' and 'alternative text'.

Use text as the colour for content on a page except for secondary information. For example, use alternative text for hint text on forms.

Use black or white text on coloured backgrounds where it is needed to meet minimum colour contrast standards.

Colour palette

The colour palette helps us give personality to our products, but also serves a functional purpose in the way we design.

Large background areas should be white or use one of the neutral colours from the palette.

Use warm or cool colours to make a product seem more friendly or muted colours to give a more functional feel.

Use the colour palette 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 way that’s helpful to users

Grey scale

Neutral colours

Colour combinations

The palette can be effective when used to:

• highlight content (but make sure colour is not the only technique used to do this)
• evoke different moods and feelings, like calm or excitement
• create a greater sense of identity for a product or service