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.

The meaning of colors

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
$color-dataviz-sequential-7
indigo-400
$color-dataviz-sequential-8
indigo-300
$color-dataviz-sequential-9
indigo-200

Don't

Don’t use sequencial colors to cross identify different data sets with no connections.

Do

Use sequencial colors for data with a sequence order.

Don't

Don’t use too many colors in heat maps.

Do

Use sequencial colors for heat maps.

Progress

When a chart is used to show the progression in the language of percentage. please use below color to the track and progression.

$color-dataviz-progress-progressbar
aqua-600
$color-dataviz-progress-background
neutral-300

Comparison

1. Comparing two data sets

Use colors different in luminosity when doing comparisons. Please note, they still need to be accessible. Below are come examples as reference.

$color-dataviz-comparison-combo1-a
indigo-500
$color-dataviz-comparison-combo1-b
neutral-500
$color-dataviz-comparison-combo2-a
yellow-600
$color-dataviz-comparison-combo2-b
blue-700
$color-dataviz-comparison-combo3-a
aqua-800
$color-dataviz-comparison-combo3-b
yellow-600

Don't

Don’t use two colors with similar luminosity when comparing datas.

Do

Use color different in luminosity when comparing two data sets.

2. Positive and negative

$color-dataviz-comparison-positive
green-400
$color-dataviz-comparison-negative
neutral-500

Don't

Don’t use red and green combination due to accessibility issues.

Do

Use green and gray combination positive and negative.