Colours

Palettes

Colours that are grouped into semantic groups are called palettes. Context determine which palette colour should be used.

• Base - Used as the basis of the palette. It should be accessible against the palette's Contrast/Muted colours, Canvas and Canvas Muted.
• Alt - Used to distinguish alternative states such as hover on interactive elements. It should be accessible against the palette's Contrast/Muted colours, Canvas and Canvas Muted.
• Contrast - Used in combination with the base and alt colours, it should be accessble with used with the base and alt.
• Muted - Used in combination with the base and alt colour of the palette as a background colour. Text can appear on this colour, so it needs to be accessible when used with body and heading.

Primary

Primary is used for our interactive elements such as buttons and links. It needs to be accessible when used with Canvas, Canvas Muted, Primary Contrast, and Primary Muted.

Error

Error is used for error states. It needs to be accessible when used with Canvas, Canvas Muted, Error Contrast and Error Muted.

Warning

Warning is used for warning states. It needs to be accessible when used with Canvas, Canvas Muted, Warning Contrast, and Warning Muted.

Info

Info is used for info states. It needs to be accessible when used with Canvas, Canvas Muted, Info Contrast, and Info Muted.

Success

Success is used for success states. It needs to be accessible when used with Canvas, Canvas Muted, Success Contrast, and Success Muted.

Focus

Focus is used to highlight the currently selected item when using tab navigation. It needs to be accessible when used with Canvas and Canvas Muted.

Body

Body is used for body text. It needs to be accessible when used with Canvas and Canvas Muted.

Heading

Heading is used for heading text. It needs to be accessible when used with Canvas and Canvas Muted.

Border

Border is used the borders of important UI elements, such as text inputs. It needs to be accessible when used with Canvas and Canvas Muted.

Border Muted

Border Muted is used the borders of decorative UI elements, such as cards. As it is used for decorative elements only it has no specific requirement to be accessible.

Canvas

Canvas is main colour used for backgrounds and impacts the contrast requirements of the other colours - Primary, Body and Heading for example need to be visible when appearing with this colour.

Canvas Muted

Canvas Muted is similar to Canvas, but allows for an additinal background colour to distunguish section, such as alternating rows on a table.

Brand

Brand specific colours can be added in order for them to be made widely available and used within the design system.

Accessibility

We take web accessibility standards seriously. As a result, we require all designs to meet the minimum contrast ratios specified by WCAG 2.1 Level AA which requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. It also requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).

You can check contrast at https://webaim.org/resources/contrastchecker/ (opens in new window) 

What is large text?

Large text is defined as typically bold text of 18.66px and larger, or regular text of 24px and larger. WCAG 2.1 Level AA requres a contrast ratio of 3:1 for Large Text.

What counts as decorative use?

Just because a colour doesn’t have sufficient contrast, doesn’t mean we can’t use it for purely decorative means. When using colours in this way it’s important not to relay any important information, as visually impared users may struggle to see it at all.

The element should have no impact on the meaning of the page - if it were removed, it wouldn’t affect the user’s experience.