We’ve designed our colour palette so that the colours in it work together in different combinations.
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.
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 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
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.
Button and form colours
There are 4 button colour combinations available:
- primary green
- primary white
- secondary blue
- secondary grey
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.
Primary green button colours
Primary white button colours
Secondary blue button colours
Secondary grey button colours
Primary white button colours
For an example of the error colours go to the form validation pattern.
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.
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
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
Changelog for this page
|21 April 2022||Error colours added to user interface colours|
|14 April 2021||First version of page published|