Colours
Colour palettes, semantic usage and accessibility requirements.
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.primary | #0C7494 |
| colors.primaryAlt | #096885 |
| colors.primaryContrast | #FFFFFF |
| colors.primaryMuted | #F3F7F9 |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.error | #D40C3C |
| colors.errorAlt | #B70932 |
| colors.errorContrast | #FFFFFF |
| colors.errorMuted | #FCF3F5 |
Warning
Warning is used for warning notifications and should only be used for large text or decorative use.
Theme tokens
| Token | Default Value |
|---|---|
| colors.warning | #D17D00 |
| colors.warningAlt | #B06900 |
| colors.warningContrast | #FFFFFF |
| colors.warningMuted | #FFFEF5 |
Info
Info is used for info notifications and should only be used for large text or decorative use.
Theme tokens
| Token | Default Value |
|---|---|
| colors.info | #1E88E5 |
| colors.infoAlt | #0F74CD |
| colors.infoContrast | #FFFFFF |
| colors.infoMuted | #F3F8F8 |
Success
Success is used for success notifications and should only be used for large text or decorative use.
Theme tokens
| Token | Default Value |
|---|---|
| colors.success | #03A649 |
| colors.successAlt | #008D3C |
| colors.successContrast | #FFFFFF |
| colors.successMuted | #F0FFF6 |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.canvas | #FFFFFF |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.canvasMuted | #F9F9F9 |
Body
Body is used for body text. It needs to be accessible when used with Canvas and Canvas Muted.
Theme tokens
| Token | Default Value |
|---|---|
| colors.body | #555C6B |
Heading
Heading is used for heading text. It needs to be accessible when used with Canvas and Canvas Muted.
Theme tokens
| Token | Default Value |
|---|---|
| colors.heading | #2F3749 |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.border | #2F3749 |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.borderMuted | #D9D9D9 |
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.
Theme tokens
| Token | Default Value |
|---|---|
| colors.focus | #2A71BE |
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.