Colour palette

Our colour system is a structured set of colours used consistently throughout a user interface to help you create visual harmony, hierarchy, and meaning.

Obligated to comply with WCAG 2.2 AA

Our colour system adheres to Web Content Accessibility Guidelines (WCAG), a set of guidelines and standards from the World Wide Web Consortium (W3C) for web accessibility.

 

 

Type

AA (WCAG level)

AAA (WCAG level)

Normal text below 24px

4.5:1 against the background

7:1 against the background

Large text above 24px

3:1 against the background

4.5:1 against the background

Graphical elements such as charts

3:1 against the background

...

When you improve colour accessibility, you'll most likely enhance the usability of all people, including people with accessibility needs such as low vision, colour-deficient partial sight, or blindness. Here are some common factors to consider.

 

 

 

Use significant colour contrast

Partial eyesight, ageing, and natural colour deficits all produce changes in perception that reduce the visual effects of any colour combinations. Two colours that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder.

Perception:
                                                                                                    To a person with colour-deficient partial sight, the left-hand side might appear as the right-hand side appears to a person with normal colour vision.

Perception:
To a person with colour-deficient partial sight, the left-hand side might appear as the right-hand side appears to a person with normal colour vision.

 

Low-contrast examples adjacent to one another

The top row illustrates how a person with normal colour vision perceives the colour contrast, while the bottom row depicts how a person with partial colour deficiency perceives it.

Low contrast: A hue with slightly similar brightness adjacent to one another.

Low contrast: A hue with slightly similar brightness adjacent to one another.

Medium contrast: Two hues with identical brightness adjacent to one another.

Medium contrast: Two hues with identical brightness adjacent to one another.

High contrast: Two hues with distinct brightness adjacent to one another.

High contrast: Two hues with distinct brightness adjacent to one another.

 

 

 

 

 

 

 

Make effective colour choices that work for everyone

Compensate for deficits by making colours differ more dramatically in the colour’s three attributes; hue, lightness and saturation.

 

How to choose colours from the colour palette

  • Avoid using hues with similar brightness that gives low contrast
  • Use dark hues against the light hues to pass the Contrast Checker
null

 

Design for colour blindness

Accommodating colour blindness is just one aspect of creating an inclusive design. It's important to provide alternative visual cues or indicators to convey information, and not just rely solely on a colour. This helps ensure that individuals with colour blindness can still understand and interact with the interface effectively.

 

For example, use labels, patterns, icons, or text in conjunction with colours to provide additional context and clarity.