How to Use Color to Manage Big Data

Elise Blanchard

Follow

Published in

GE Design

8 min readMar 19, 2018

--

Data Visualization

“Every 2 seconds an aircraft powered by GE technology takes off.” (source) Aircraft engines generate data that helps provide insights on the engine’s performance. Working with airline customers, GE Aviation develops analytics and uses the outputs to help airlines determine if an engine needs maintenance or can stay on wing.

How can we, as designers, take such a surplus of data and make it digestible for users?

Data visualization allows users to understand large amounts of data, to observe data trends and irregularities, and to allow smooth operations of the engine assets. Taking decades worth of data and making it digestible is, in short, difficult.

Color is Your Friend

Color is one of the strongest tools in our arsenal to help create hierarchy, tell a story, and help our users move through complex tasks and data with ease. Changing a background color, or reserving specific colors for call to actions, when used consistently, can act as a significant guide to help our users use our applications as intended.

When creating web based applications, all colors you use are based in the light primaries: Red, Green, and Blue. When combined, they created the secondary primaries: cyan, yellow, and magenta. When Red, Green, and Blue lights are all turned on, they become white light, and when they are all turned off, the absence of light is perceived as black. Red, Green, and Blue combine to produce all of the colors we use on our applications.

These colors, or hues, can be used to help differentiate dissimilar data by using complementary colors (colors opposite on the color wheel) and to help group similar assets by using analogous colors (colors near one another on the color wheel). When using color as a representation of a specific data type, it is important to be strategic and consistent to help users parse through large amounts of data quickly through pattern recognition.

The Importance of Accessibility when Designing for Big Data

The use of color, though, is not without it’s difficulties. Inherited visual defects, such as color blindness, or age related visual degeneration make it difficult to ensure that color will be interpreted consistently from person to person. The environment in which work is conducted is equally difficult to predict or control. What is the light source? Is it natural light, florescent light, or perhaps a combination of both. Do your users take their devices outside into natural light? Even if all environments and genetics could be considered equal, there is still the issue of different computer and monitor brands having different default color calibrations.

If we have no way of ensuring that all users see colors the same, how can color be the solution to data visualization? Sometimes it’s not necessarily the hue itself that matters, but the value of the hue. If we rely upon color alone, we risk alienating users who may have difficulty telling hues apart.

Choosing a diverse color palette that is rich in values, hues, and saturation is key to helping ensure that your data visualizations are accessible.

Changes to your Workflow

Here’s 4 tips to help you use color effectively:

When creating a color palette, ensure that there is a perceptible and measurable change in value between hues.
Test your color palette implemented with different data visualizations with users to ensure your colors are meeting the needs of your particular users.
Avoid using analogous color groupings for charts and graphs (all warm colors, all cool colors, etc.)
Ensure that the contrast between your text color and background color are AA or AAA compliant.

The Process

When creating a color palette for data visualization, I like to start by picking colors equally spaced upon the visible light spectrum. From there, I turn to the light primaries and secondaries. This creates a color palette of nine individual hues: red, magenta, orange, yellow, green, blue, cyan, indigo, and violet.

After defining an initial palette, it’s time to focus on contrast. I frequently switch between RGB and Grayscale modes to help ensure that the values of the hues in the color palette have the greatest amount of contrast I can produce.

When determining value, some colors tend to favor one end of the value range over the other. Yellow, for example, reads as a true yellow with a lighter value, as compared to yellow with a darker value which reads as brown. Additional focus should be placed on ensuring a change in contrast between analogous colors since their hues are the most similar. The natural tension between complimentary hues is not enough to ensure legibility; we must also try to ensure that complimentary colors with known issues, such as red and green, have different values.

Process Checklist:

Do your analogous colors have different values?
Do red and green have different values?
Do yellow and blue have different values?
Does your overall color palette include evenly spaced changes in value from darkest to lightest?

Measuring the Contrast

Changes in value can be identified by measuring contrast changes between hues. To more easily view value change, I prefer to convert my color palette into grayscale. From there, I use a color contrast checker to help identify the contrast ratio between different hues.

Contrast is King

For a nine color palette, like the one we are creating, the contrast should be at least “1.20:1”, based upon feedback from users. Contrast measurements between “1.10:1–1.20:1” may have issues, where as anything below “1.10:1” is far too similar in value to have effective contrast. I recommend that once you have created a color palette, you test your palette with your target users to ensure that these ratios are correct for your demographic and use cases.

Contrast between values should be clearly defined and occur in evenly spaced increments.

Analogous Colors

When we convert the color palette into the order of the visible light spectrum (red — violet), colors which are analogous should have a measurable change in contrast. This will help our users tell the difference between different groups of data that may be represented by similar hues.

Simulations & Testing

Deuteranopia, & Tritanopia

“Red/Green colorblindness affects “Roughly 8% of men and 0.5% of women” (source)

Differences between perceived hues can greatly impact the legibility of graphs, impeding users who perceive color differently from completing tasks crucial to their job function. Correct perception of data should not be tied to the identification of a specific hue. Text, legends, and iconography can help add additional context.

When simulated as one with deuteranopia may perceive, the red and green tones are removed, and the palette is entirely reliant upon value and contrast. The lessened contrast between magenta and orange, may make it difficult for some users to see the difference between these hues.

While Tritanopia is a much rarer form of colorblindness, it still affects, at most, one out of every 10,000 people (source). We should never assume that our users can and should see colors the same way. Instead, we can create color palettes robust and flexible enough to transition into different use cases through effective focus on contrast.

Glare & Low Contrast

Users work in a variety of lighting conditions including low-light situations, florescent lighting, and direct or indirect sunlight. Aging, as well, can decrease your ability to perceive the difference in contrast between colors and text. By putting the color palette through a low-contrast filter, areas in your color palette that could need increased contrast are identified.

In a lower contrast simulation, the value change between yellow and green becomes a potential issue.

Our devices emit light, but in the presence of a stronger light source, such as sunlight, glare can greatly impact how colors are perceived.

Similar to the low-contrast view, the value change between yellow and green could potentially become an issue in high glare situations.

Text Legibility & Blurry Vision

There are two different rating scales to help determine text legibility AA and AAA. Within each rating scale, there is a subsection for text smaller that 18px and one for test above 18px. When testing text legibility, I like to use contrastchecker.com.

“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.” (source)

This tool can help you decide which font size to use with specific font color and background color combinations. If you have low visual acuity, effective contrast between the font color and the background color can make a great difference in legibility.

Black text upon a yellow background has an effective contrast to be easier to read if a user has blurry vision. White text upon a yellow background, does not have enough contrast, and is much more difficult to read.

User Testing

To validate these simulations, I contacted twelve users from around the world and instructed them to review an attached .png image. In addition, I requested that they review the image where they typically work under normal lighting conditions. From there, I asked the users to report which graph in each row was easier to read. If none of the graphs in a row were easy to read, they were to select “D” as their choice. I asked them to describe their lighting conditions and their computer make/model. I tested a muted palette, a lighter palette, and a saturated palette using red, yellow, and orange, three colors previously identified in another study as hues my users were having trouble isolating.

What did they have to say?

For graphs, the users preferred the more saturated palette, but for legibility of text, increased contrast was preferred. 55% of participants had all or partial florescent lights, and 45% of participants had natural or partial natural light.

In Summary

When designing applications, it’s our ethical obligation to create designs that help the user, not hinder them. As the world moves to digitizing previously analog processes, it is important to prioritize accessibility so that we are inclusive and not creating barriers between our users and the data they need to perform their job function. Taking the steps now to focus upon contrast in value and hue can make a huge difference for your users.