Data visualisation

Data visualisation system

Colour plays a significant role in data visualisation, colour can help simplify complex data and is used to convey relationships between various types of data.

There are 10 data visualisation colour sets which are intended on for use with graph, charts and other data visualisations.

Colour tokens

Data visualisation colour tokens are considered for:

• Default
• Background
• Text

Data visualisaiton guidance

• The default and text colour tokens for each data visualisation colour set can be used on any associated background surface.
• The default token meets contrast at 3:1 for non-text content.
• The text token meets constrast at 4.5:1 for text content.

Data visualisaiton rules

• Use the background-primary token from the main colour set where possible, other defined background tokens can be used however the plainer the background the more a user can focus on the visualised content.
• When applying colour over multiple visualisations assign the same colour to the same variable in each visualisation to maintain a relationship in the content. When changing colours it becomes harder for users to understand the information.
• Use colour relevant to the information you are conveying. For example, green conveys positive values and red conveys negative values.
• If using colours within a key make sure the order of the key matches the the colours within the data visualisation.

Accessibility requirements considered for data visualisation

• Text on backgrounds are above the 4.5:1 contrast ratio
• Non-text content and user interface controls on backgrounds are above the 3:1 ratio
• Use of Colour where colour alone is used to identify visual meaning