Improve Kendo UI DataViz series color palettes for color blindness
Overview
Kendo UI is a bundle of four JavaScript UI libraries built natively for jQuery, Angular, React and Vue. Each is built with consistent API and theming, so no matter what you choose, your UI will be modern, responsive, accessible and fast. As part of the product accessibility improvements goal, I worked on a proposal aimed towards the color blind demographic.
Project Type
Web
Company
Progress, Senior UX Designer, 2022
Project Brief
Kendo UI is a collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue. The DataViz package containing the chart components is a part of each suite. In this project I researched and proposed additional series color palettes to the default one to raise the level of accessibility for color blind users.
The Problem
In the DataViz components series color choice is a very important part in conveying the right information. Low contrast rates between the series colors could lead to misunderstanding of the information by the user.
The Goal
As Kendo UI is a component vendor and we have very little predictability of our users’ exact needs, my goal is to add more palettes to the DataViz components, available to be switched on by the users if desired.
Responsibilities
User research, user testing and visual design
Tools
Figma, Chromatic Vision Simulator
The Research
How common is Color Blindness and why it’s a big deal?
The most common, Deuteranopia and Protonopia (known collectively as red or green-blindness or weakness) is very common, affecting 1 of 12 Caucasian males (8%), 1 in 20 Asian males (5%), and 1 in 25 African males (4%), and 0.5% of women. In Britain, there are 2.7 million (4.5%). The rarer type, Tritanopia, or blue-blindness affects 0.03% (1 of ~10 000 people), while the most rare type, monochromacy, affects just 0.003%. Studies have shown that around 8% of men and 0.5% of women have color vision deficiency (CVD). This is more commonly referred to as colorblindness, although colorblindness is not the most accurate term. Having CVD does not mean that a person can’t see color unless you are the very rare person (one in 33,000 people) with achromatopsia. For the more common person with CVD, the key problem is that colors most people see as different will look the same. The two most common types of CVD are deuteranomaly and deuteranopia, which together count for about 6% of men, and protanomaly and protanopia, which account for another 2% (more information available at color-blindness.com). These conditions are also commonly referred to as “red weak” and “green weak” or “red-green colorblindness.”
Why is color so important in data visualization?
Color plays a significant role in data visualization. For starters, colors are used to highlight important information, as well as illustrate relationships between various types of data. Color also plays an instrumental role in guiding the viewer’s eye. It can even be used to stimulate emotion through color psychology.
Color plays a crucial role in data visualization, particularly from a user experience (UX) standpoint. Here's why:
Enhanced Comprehension: Appropriate use of color can help users quickly understand complex data sets, making information more accessible and easier to interpret.
Improved Readability: Strategic color choices can highlight important data points, create contrast, and guide the user's eye through the visualization, enhancing overall readability.
Emotional Impact: Colors evoke emotions and associations, which can be leveraged to reinforce the message of the data or create a specific mood around the information presented.
Hierarchy and Organization: Color can be used to establish visual hierarchies, grouping related data and distinguishing between different categories or levels of importance.
Brand Consistency: Utilizing brand colors in data visualizations helps maintain a cohesive visual identity across different platforms and touchpoints.
Accessibility: Thoughtful color selection ensures that visualizations are accessible to users with color vision deficiencies, adhering to inclusive design principles.
When designing data visualizations, it's essential to consider color theory, contrast ratios, and cultural color associations to create effective and user-friendly visual representations of data.
As a next step I tested the current Kendo UI DataViz palette in Chromatic Vision Simulator.
In each simulation we have a group of colors that look really similar and it’s really hard to tell the difference. The test proves that the default Kendo UI palette is not accessible to color blind users and there is indeed a need to develop additional palettes.
Design
My design ideation started with additional research on popular but problematic color palettes often used in DataViz and I did additional tests to figure out why they don’t work. The most problematic color combinations were:
Red & green
Green & brown
Green & blue
Blue & gray
Blue & purple
Green & gray
Green & black
Color blind friendly palettes
Masataka Okabe and Kei Ito have proposed a palette of 8 colors on their website Color Universal Design (CUD). This palette is a “Set of colors that is unambiguous both to colorblinds and non-colorblinds”. The use of this palette is supported by others (Wong, 2011; Levine, 2009) and it is the default scale for the book “Fundamentals of Data Visualization” by Claus Wilke.
Martin Krzywinski has a website with 12- and 15-color palettes that offer more choices. Personally, I have difficulty with distinguishing several of these colors. Also, it is recommended to use no more than 8 different colors. Therefore, these palettes will not be taken along.
Paul Tol has created several qualitative color schemes that are color blind friendly. These palettes have 5-10 colors (including grey) and vary in darkness.
Using the collected knowledge on the topic I created hypothesis around two sets of three color palettes and I tested them with people with different color vision deficiencies.
The interviews and simulations showed that the first set of palettes works well for people with Tritanopia and the second set works well for people with Deuteranopia and Protanopia which was exactly what was expected. As a first step, we decided to add the Deuteranopia and Protanopia palettes as additional accessibility swatches as they targeted a larger percentage of demographic.
The project continued with an additional improvement of adding patterns and additional configuration options like stroke type and thickness to the DataViz components (where applicable) in Kendo UI to improve differentiation of elements. Examples with the default palette below.
Lessons learnt.
Line thickness is incredibly important to improve the process of differentiation between data viz elements - be mindful when designing chart components.
In addition to colors, consider the use of patterns or labels to distinguish between categories.
If you must use red and green together, leverage light vs. dark.
Use a maximum of 8 different colors for the labeling of different categories.
Encourage using a legend that shows the colors, instead of referring to the colors by their name. Keep the legend that explains the mapping of the colors close to the actual data.