Colours

Palettes

Colours that are grouped into semantic groups are called palettes. Context determines which palette colour should be used and the contrast requirements that need to be met.

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 destructive actions, error states and error messages. It needs to be accessible when used with Canvas, Canvas Muted, Error Contrast and Error Muted.

Warning

Warning is used for warning notifications and should only be used for large text or decorative use.

Info

Info is used for info notifications and should only be used for large text or decorative use.

Success

Success is used for success notifications and should only be used for large text or decorative use.

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.

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.

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.

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.