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.

Palette colours

Each palette has six colours, except the Primary palette, which has four.

{base} represents the palette name. For instance, in the success palette, the {base} token is success and the on{Base} token is onSuccess.

• {base} - saturated fill, or for use on canvas
• on{Base} - text and icon colour on {base} or alt surfaces (meets 4.5:1 contrast against both)
• alt - saturated fill, slightly darker than {base}; used for hover state when a component using {base} is interactive; never used as a static colour
• subtle - very light background, suitable for larger fill areas
• muted - light background, suitable for smaller fill areas
• onMuted - text and icon colour on subtle or muted surfaces (meets 4.5:1 contrast against both)

Note: infoContrast, successContrast, warningContrast, and errorContrast are deprecated aliases for their respective on{Base} tokens. primaryContrast is not deprecated.

Primary

Establishes visual hierarchy and draws attention to the most important action on a page. The main signal of interactivity in the system. May be the brand colour, but not necessarily.

Error

Signals that something has gone wrong or will cause a problem if the user proceeds.

Warning

Signals that something needs attention, but is not necessarily a problem yet.

Info

Provides supporting context that is useful but not urgent.

Success

Confirms that an action completed as expected or that a state is healthy.

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.