Chart color guidance

This is a guideline on how to choose color for data chart.

Please use color tokens, NOT hex code, if the color is used in the products. Only use hex code for Looker, slides, or Google sheets.

Rule of thumb

1. Choose color based on information, NOT chart types.

2. Avoid too many colors as it’ll make it difficult and distracting to read.

3. Text color needs to pass WCAG 2.0 AA accessibility standards.

4. There always exceptions. Only break the rules when absolutely necessary.

Accessibility

Please use contrast checking tool to ensure the text color passes AA standard.

Don't

Don’t use non-accessible colors for text.

Do

Make the texts AA compliant. Check using color contrast tools.

Color has symbolic meanings in various cultures. It has the power to communicate information. A couple of colors in the VTS design system palette hold commonly agreed-on semantic values in the western world: red and green. Hence, they need to be used in a way that associate with the semantic meanings.

Red

In western culture, red is commonly associated with warning, alert, and failure; In finance, it is commonly associated with a decrease in value.

$color-dataviz-critical-1

red-600

$color-dataviz-critical-2

red-400

$color-dataviz-critical-3

red-300

$color-dataviz-critical-4

red-200

Green

In westerm culture, green is commonly associated with success; In finance, it is commonly associated with an increase in value.

$color-dataviz-success-1

green-700

$color-dataviz-success-2

green-400

$color-dataviz-success-3

green-300

$color-dataviz-success-4

green-200

Neutral information

When the information in a chart are equally important, colors are used as identification. Please refer to the below colors based on the color variaty needed.

Avoid too many colors as it’ll make it difficult and distracting to read.

$color-dataviz-categorical-1

indigo-600

$color-dataviz-categorical-2

aqua-400

$color-dataviz-categorical-3

pink-400

$color-dataviz-categorical-4

blue-400

$color-dataviz-categorical-5

yellow-500

$color-dataviz-categorical-6

gray-400

Only use below colors for edge cases

$color-dataviz-categorical-7

indigo-800

$color-dataviz-categorical-8

aqua-600

$color-dataviz-categorical-9

pink-700

$color-dataviz-categorical-10

blue-600

$color-dataviz-categorical-11

yellow-600

$color-dataviz-categorical-12

gray-800

$color-dataviz-categorical-13

indigo-300

$color-dataviz-categorical-14

aqua-300

$color-dataviz-categorical-15

pink-300

$color-dataviz-categorical-16

blue-300

$color-dataviz-categorical-17

yellow-400

$color-dataviz-categorical-18

gray-300

Don't

Don’t use different colors unless for differentiating data sets close together.

Do

Only add color varity to data charts close together with different data sets.

Don't

Don’t use different colors unless for differentiating data sets close together.

Do

Use the least amount of color.

Do

Only add a color varity to data charts close together with different data sets.

Do

Use colors to highlight information.

Sequencial information

When the information has a hierachy to it, like a process funnel, timeline, progressing. Use light color for lighter values, deeper color for higher values.

$color-dataviz-sequential-1

indigo-950

$color-dataviz-sequential-2

indigo-900

$color-dataviz-sequential-3

indigo-800

$color-dataviz-sequential-4

indigo-700

$color-dataviz-sequential-5

indigo-600

$color-dataviz-sequential-6

indigo-500