How Google Analytics and Microsoft Clarity Fail to use color effectively in Data Visualization
Data visualization has become an essential part of modern communication. Creating easily understandable charts has never been easier, thanks to the availability of numerous visualization tools. But one of the most common mistakes individuals make while presenting the data is choosing the wrong colors. A poor choice of colors would hugely impact the understandability of the data and will make the viewers and analysts struggle to find patterns in the data. Designers must choose the right colors that look visually appealing while adhering to the brand guidelines, and at the same time, the choice of colors should meet the accessibility goals.
Observation
Being a UX designer, it is essential for me to maintain an up-to-date portfolio website and consistently improve it based on user behavior. To track user behavior and user traffic, I integrated my portfolio website into Google Analytics and Microsoft Clarity. After using the tools for over a month, I felt both platforms hadn’t put much thought into designing for data visualization. Though Google Analytics is one of the prominent analytics platforms, it is not on top of the data visualization game. Here is a screenshot of one of the charts on the platform, depicting the website activity.
What do you think about the line chart in the above screenshot? Well, firstly the choice of colors is really poor. The colors used in these line charts — Prussian Blue, Light Blue, Dark Blue, Light Purple, and Dark Purple (Color codes: #3576AE, #3871E0, #4747E2, #6B37C4, #681590) — are very similar to each other, making it difficult to distinguish the metrics. This gets even worse from an accessibility point of view. Not only is the choice of colors making it hard to discern the data segments for anyone with normal vision, but the palette is also not colorblind-safe.
The below images show how these colors are perceived by people with normal vision, Protanopia (red blindness), Deuteranopia (green blindness), and Tritanopia (blue blindness). Dark Blue and Light Purple (the third and fourth colors in the normal vision palette) are barely distinguishable for people with Deuteranopia and Protanopia.
Another such example is the Donut charts on Microsoft Clarity’s dashboard. Instead of coloring the segments continuously, Clarity has used small gaps to add discreteness and divide the segments in the chart. This will help users to tell the segments apart. This is a good design decision, yet the colors are not colorblind-safe.
The colors used in the above chart — Light Blue, Dark Blue, Magenta, Violet, and Lavender (Color codes: #3376CD, #051789, #D02C89, #44083D, #8E7FD5) — are so close to each other that the contrast between these colors becomes very less. This makes it hard for colorblind people to differentiate the colors. The below images depict how people with color blindness view these colors. Dark Blue (second) and Dark Purple (fourth), and Light Blue (first) and Light Purple (fifth) are barely distinguishable for people with Deuteranopia and Protanopia.
Though both platforms use tooltips to convey more information about each data segment, you cannot rely entirely on tooltips. This is because tooltips are rarely operable using a keyboard and screen readers find it difficult to read the contents of the tooltip. Additionally, it is hard to use tooltips on mobile devices.
How to make the right color decisions?
According to the National Institute of Health, 8% of men and 0.5% of women are affected by color vision deficiency. This means that in a population of 100 people comprising 50 men and 50 women, 5 people are colorblind. However, when we consider the vast number of visitors to an app or a website in a day, in thousands and millions, this seemingly small number becomes incredibly significant.
Before talking about the right color decisions, let’s discuss Hue, Saturation, and Lightness (or Brightness) for a bit. Simply put,
- Hue is a pure color with no addition of any black or white pigment. 3 primary, 3 secondary, and 6 tertiary colors comprise the Hue palette.
- Saturation indicates how pure a hue is, or the amount of grey present in a hue. The result of various combinations of these values is what we usually call a color.
- Lightness is the relative amount of black or white mixed with a hue.
The result of various combinations of these values is what we usually call a Color.
So, coming back to our discussion on data visualization palettes, three main types of color palettes are widely used.
- Sequential palettes: These palettes are ordered. Colors are laid out in a continuum by altering lightness or hue, or both.
- Categorial palettes: These palettes do not have an order and each color in the palette is very distinct from the others.
- Diverging palettes: They have two different hues at each end which diverge from a common central point. At each extreme are two dark colors with different hues.
Bob Rudis, Noam Ross, and Simon Garnier designed two sequential color palettes Viridis and Magma, which are colorblind safe and are pretty to use for data representation. Inspired by these palettes, Adobe has laid out a systematic color palette with intense research that can be used for data visualization. Here are a few things that you should consider while designing a color palette for your data visualization needs.
When to use a sequential color palette: Do not make the same mistake as Google Analytics. Sequential colors must be present right next to each other to tell them apart. These palettes are not ideal when the data is scattered like a line chart. Use sequential colors to depict intensity, as users subconsciously associate these colors with numbers and intensity. (darker color — higher intensity/ value)
When to use a categorical color palette: When you want to plot absolute values and categorical data, use a categorical color palette. Viewers should be able to see the difference between each category. Using a categorical palette would be the best for the line charts from Google Analytics that are shown above. Also, remember that a categorical chart should at most contain 6–8 colors. Beyond that, it becomes hard to understand the chart. In that case, try clubbing the least significant segments into an ‘Others’ category.
When to use a diverging color palette: Diverging palettes are used to show the transition from one extreme to another extreme or to display deviations from a central value, for example, hot to cold temperatures or low to high intensity.
Alternatives for colors: Using colors is good as it makes the data look pretty. But consider other options like changing the line weights and types, using patterns, or changing the chart types altogether if your chart becomes messy.
Always consider accessibility: Remember, your design must be accessible to everyone. It is important to create colorblind-friendly palettes. Chroma.js comes in very handy in creating accessible color palettes.
Final Thoughts
It is crucial for designers and developers to ensure that the applications they are designing are accessible to everyone. After all, data visualization is all about making complex data simple and fun. With this knowledge, given a chance, how would you redesign the charts of Google Analytics and Microsoft Clarity?
About the Author
Hey folks. I am Ravi Shankar Kunapuli, a Product Designer currently pursuing my master’s degree in Human-Computer Interaction at Indiana University. I am a passionate designer, and an artist and I love singing.
You can view my work here. Wanna talk design? Hmu on LinkedIn or send me an email at ravi1617sankar@gmail.com
