Data Viz Color Palette
CyberSecurity / Design System / Data Visualizations
The Client needed an update on their data viz library and color palettes. Their original color palette consisted of 6 colors with many accessibility issues. The goal was to create an accessible color palette to use specifically for data viz in light and dark mode. By doing in-depth research on data visualization color palettes and utilizing IBM’s approach to creating accessible color palettes, a teammate and I established two color palettes that were accessible and aligned with the Client’s brand.
As a result, the color palettes were not 100% accessible, so we provided guidelines for the most accessible color combos for designers and developers to reference.
Methods & Skills
Design Thinking
UI Design
Accessibility
Tools
Figma
Viz Palette
Timeline
June 2021
My Role
I was one of two UX designers working on the color palettes. While on another project, I researched how to create accessible data viz palettes and shared my findings and tools with the design system team. Afterward, I contributed to the design system by doing the dark mode color palette.
Design Challenge
The main challenge for this initiative was to expand the data viz colors while making them accessible and on-brand. Because our client worked in cybersecurity, it was a high priority to ensure the color palettes were accessible as possible. If their security analysts made a mistake, it could cost their clients millions of dollars and put their customers at risk.
The Process
Understand
Research
Before collaborating with the design system team, I researched different kinds of data viz color palettes and best practices. Eventually, I found an article on how IBM had expanded their data viz color palette and the approach and tools they used.
Explore
Expanding the Palette
Our Client had previously expanded the brand with a set of secondary colors. From that, I put each color in a ten-color monochrome palette.
Checking Contrast Ratio
From the gradients I created, not all would pass the minimum accessibility requirement for visuals which is 3.5:1. I had to check each color with the background color and mark at what point the contrast ratio was too low.
Explore
Materialize
Iterate, Test, Redesign
This part of the process was the most time-consuming and challenging. From here, I would take 14 colors from the gradients. Then plug the colors into Viz Palette, which checks the accessibility in common color blindnesses. For the swatches that conflicted the most, I would replace them and insert them back into the Viz Palette and check again.
Example 1
The goal was to minimize the number of thick arcs in each color blindness.
Example 2
You will see that some color blindness modes improved while others gained more errors.
This was a challenge we faced while creating the palettes.
Matrix of Color Options
Each week, we presented multiple color palette options to the client with examples of key screens from the product. Below is an example of a matrix we made to compare the options. In total, we created about 5 of these matrices.
Explore
Accessibility Mode
Using color alone is not a best practice for accessibility. Experts recommend using another variable like pattern or shape. I explored an “accessibility mode” and tested different patterns and shapes in the dark mode color palette. Unfortunately, because of scope and the timeline, the client put a pin in the accessibility mode but appreciated the explorations for when they had time to update in the future.
Materialize
Data Viz Color Guidelines
It is extremely challenging to create a data viz color palette that includes 14 swatches that is 100% accessible to everyone. As a result, in the data viz guidelines, I documented which color combinations are the most accessible for developers and designers to reference. The color combos were curated to be accessible and coherent with the other combinations.
Results & Reflection
This project gave me the opportunity to study color and accessibility. My teammates named me the color expert after doing this project, which lead to me working on enhancing other color palettes, such as the severity and feedback, to be accessible. I now feel more confident in my abilities and have more knowledge on accessibility. I like to think know I am an accessibility advocate! The client was very happy with the end results, and personally messaged me to say how awesome they looked! I am more aware about color accessibility and will continue to support best practices in my future projects when it comes to color.