# Colour

# Colour Quick References

See our guidelines on usage for each colour

# UX Base Palette

# Communication Palette

# Brand Palettes

Each brand has a different selection of colours to work with our base and communication palettes defined by their creative teams. Each brand has a highlight colour and shades that can only be used for that brands website. In addition, brands will define colours for sale events & for specific campaigns.

# Colours & Accessibility

Correct use of colour on our sites is an important aspect of creating an accessible experience. We aim for our sites to meet WCAG AA accessibility standards.

# Contrast Ratio

Insufficient colour contrast between foreground and background colours makes content hard to read for everyone. An online colour contrast calculator can help you accurately analyse the colour contrast in our products, ensuring that it meets optimal standards.

An accessible colour combination is defined by sufficient contrast ratio between the foreground and background colour in an interface. Only elements that convey information to users (e.g. text or icons) are required to meet these standards.

For AA standards, the required contrast ratio is 4.5:1 for small text is and 3:1 for large text and graphical objects conveying information to customers. Large text is defined as 14pt/19px if bold or 18pt/24px if regular weight.

# Accessibility Grids

These links show our base, brand and communication colour palettes can be used together for each brand:

# Reliance

Colour alone should not be relied on to convey a message. For example, certain types of colour blindness make it difficult or even impossible to see common red alert messages. Elements should be distinguishable using other design principles, without sole reliance on colour.

# Tools

Colour.review - We use this online tool for checking colour contrast.

Stark - We use this Sketch plugin

# Our Colour Palettes

It’s important to check your brand colours against our accessibility guidelines, for example if you’re using white text on a coloured background. When specifying colours for your brand, it's a good idea to understand the different colour harmonies available.

# Highlight Colours

The colour of the UI on our sites and apps is made up of combinations of black, white, and the grey palette, but you can use highlight colours for your brand. Highlight colours are used sparingly and defined by the brand teams.

# UX Base Palette

Black & White

We don’t actually use black or white in our designs and UI — the “white” we use is a very pale grey, and the “black” we use is a very dark grey.

Pure black and whites are better used in print where the addition of an extra light source changes how a user perceives the colour. These work less well on backlit screens that create very sharp contrast that can overstimulate the eyes of the user causing eye strain and reducing reading stamina

Greys

Greys play an important part when designing our products and it is important that these are consistent across our UI, but also accessible. The grey palette provides 4 shades of grey giving us an ample variety for any situation. Greys can be used to differentiate sections by adding them as a background colour. E.g. this document has a white header and uses Grey 100 for the page background.

# Communication Palette

Some elements require colour to portray different meanings to our customers, so we have developed a "communication palette" in addition to brand palettes. It specifies 4 contexts:

• Success
• Information
• Warning
• Alert

The colours pass WCAG AA accessibility standards. and we recommend that these colours remain the same regardless of brand due to their well-known usage and connotation in other products, both online and offline.

Success

We use the success colour for positive messaging, e.g. for displaying successful actions (e.g. payments, adding a card, saving an address, updating a password). It is also the colour we use for Add to bag and Checkout buttons across each brand. Additionally, we may use this colour to denote sale item pricing to drive urgency and bring attention.

Information

We use the information colour for standard hyperlinks, as well as informative messaging, e.g. helper text and icons. It’s also used in forms to show selected states for checkboxes, radio buttons, active text inputs, toggles and most other standard components.

Warning

We use the warning colour to communicate that user progress may be impeded unless an action is taken.

Alert

We use the alert colour to communicate important information to the customer, e.g. error messaging and actions that need to be addressed.