Use color to distinguish items

Color is often used to distinguish discrete dimensional items or groups that do not have an intrinsic order, such as different products or regions. When coloring dimensional values a qualitative color pallet is used.

Use color to represent data values

Color is commonly used to represent the quantitative value of the data such as Dallas ($), Temperature and Units Sold. There are three possible scales to use to represent data values there are:

1. Sequential – to visualize data is changes from low to high
2. Divergent – to visualize the deviation of data values in one of two directions relative to a neutral midpoint; and 
3. Threshold – to visualize and assign meaning to intervals. Such as Below target, on target, above target 

Use color to highlight items

Color can also be an effective tool to highlight specific items in the data. For example, if doing benchmark analysis and you want to highlight a specific store relative to others, color that item differently to draw the user’s attention to it.

Sequential palettes

These are suited to quantitative data that progresses from low to high values. A sequential color scale should:

1. Indicate which values are smaller or larger than others
2. Indicate the relative distance or gap between values 
3. Be uniform across the entire range
4. Use a single color scheme for the entire range

Typically light colors are used for low data values and dark colors for high data values.

Sequential pallets are ideal where the value is always greater than 0 such as actual sales data by location.

<C61 insert image map with many colors versus map one color hue>

Diverging palettes

These highlight extremes on the value range and are useful for variation analysis where both positive and negative values are possible. The extremes are highlighted with darker colors and the midrange tends to be light greys or muted. For diverging use two hues one communicating desirable values versus the other undesirable.

These pallets are ideal for using color to denote variation. For example variation from prior periods. In the example below sales by-product is used for the main axis whilst color shows the change from the previous period.

<C62 insert image – variation white to blue versus red to blue.>

Qualitative palettes

These are used to separate data into distinct groups (categorical values) instead of imply quantitative differences in the data. A qualitative color scale should:

1. Contain a finite set of colors that look distinct from one another. 
2. No color should standout from other colors and be dominant
3. The color set should not imply order. Ie get lighter or darker

<Insert some example pallets>

You would use qualitative colors when you want to show the relationship of the metric to the categorical values. For example sales by product category. 

<C63 insert scatter plot monochrome versus color – grouped by category>

Interval Pallets

Interval pallets are used when an interval scale is created from a quantitative value and color is used to assign meaning to those groups.  For example, taking percentage of target and creating 3 groups.

• 0-85% Below target Red
• 85-110% On target Grey
• 110% + Above target Blue

Typically interval pallets are created when doing conditional formatting. The pallets tend to be much simpler – two to three colors only. 

<Insert some example pallets>

When using threshold pallets ensure that the good and bad colors are consistently used and that you avoid red and green.

<C64 insert image – example of conditional format used on a bar chart>

Highlight Pallets

When highlighting data use a darker color or accent color to draw the user’s attention. For example, if the dashboard is focused on a single store then highlight that store in your visualizations using an accent color.

<C65 insert image – bar chart all bars same color, bar chart store highlighted – liquorio isv dashboard>

Do not encode too much information

Avoid using color when there is a huge amount of variation. Color should only be used when there is a limited set of variation that users need to interpret. Consider using more aggregated groups when too much variation exists.

Do not use color to decorate components

Do not use color for irrelevant details or to decorate your chart. For example using brightly colored titles or legends and axis only distracts a user from the data

<C67 insert image – don’t cololored titles, do greys>

Do not use color to decorate series

Do not use color options such as gradients to decorate a series and imply meaning where none exists. 

<C111 insert image – bar chart color gradient going from left to right, versus flat bar>

Use color to denote differences in data

Color in data points should only be used to denote differences in data, For example, do not color bars for region by region. The axis already communicates the regional factor. Adding color only implies that there are additional differences between the bars that a user should be aware of.

<C68 insert bar – colored by region, by region no color>

Use colorblind-friendly palettes

Nearly 10% of males and 1% of females suffer from a form of colorblindness, with the majority being unable to distinguish between red and green. Even though this combination is often used to denote good and bad it should be avoided. Consider using the following pallet to minimise the impact on the color blind.

Contrast between dataset and background

If you want to make sure that your data elements are easily seen ensure that their colors contrast sufficiently with any background colors or elements nearby.  You want to draw the users attention to the most important element on the page – the data not the background. 

It is OK to have a dark background or a light one – so long as the color contrast is sufficient.

<C69 insert image – chart dark grey background and colored dost versus a dark background and colored points>

Good versus Bad

Often color is used to indicate whether a number is good or bad. It quickly tells the user that a indicates to the user the meaning of the number without the user having to actually read and process the value of the number. If using color in this way be consistent. Always use the same colors to indicate good and bad – do not vary from this throughout your dashboards as it will only confuse the end user. Avoid red-green indicators – refer to color blind color pallets.

<C70 insert image – conditional format columns some blue red others green red>

Metric colors

If using the same metrics repeatedly consider assigning a color to the metric. In this way, users will quickly be able to view a chart and know what the series is showing without needing to focus on a legend or title.

<C71 insert image – multiple charts different colors for series versus same color for series>

Categorical Colors

Where analysis is performed across a series of metrics using a common dimension – for example, sales region you should consider assigning colors to the dimensional values – in this case, each region should have a uniquely defined color. This enables a user to quickly inspect multiple visualizations knowing that the categorical color is always the same.

<C71 insert images – dashboard diff colors for dims in charts versus the same>

Color for highlights

If using color to highlight a particular categorical value use that consistently across visualizations. This is useful when your dashboard is focused on a single entity and is comparing that entity to all like entities. For example store sales versus all stores in a particular region.

<C72 insert image – store map and bar chart>