top of page
Color Palette Cover.png

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




Viz Palette


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

Process 2.png


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.

Color Palettes.png

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.


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

Accessibility Check 2.png

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.


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.

Accessibility Mode.png

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.

bottom of page