In order to make sure that the new color palettes were not only visually appealing, but also functional and accessible, it was imperative to make sure they were research backed. After interviews with designers and meetings with developers alongside several color-blind tests and a lot of research, we opted for 3 different color palettes of 7 colors with distinct use cases for each.
The first step was to analyze where we were with our current color palette and how those colors can be leveraged to assist in the creation of the new palettes. To do this, I started with plugging in our current color palette into a color wheel and organizing color combinations by complementary, analogous, and split complementary/triadic.
Pulling from the current colors, I used the above palettes to determine which colors to choose for the Qualitative palette. We wanted to refrain from using green and red to avoid any crossover with the current status colors.
For the Sequential palette, we decided to build the palette around Brand green at the center and gradually add 3 darker shades and 3 lighter shades.
Similarly for Diverging, we pulled from both the split complementary color pairings and one of the current brand gradients had the two colors merge at a neutral color between the two.
Once the initial color palettes were loosely decided, I plugged them into some graph and chard examples and ran them through color blind tests and determined that greyscale was the only way to maintain consistent contrast across all types of colorblindness. View all of the testing here.
After several tests, we finalized the color palettes to the following palettes and applied them to various charts and graphs.
Once the colors successfully went through final testing with the Product team and accessibility testing, some of the benefits from the new palettes included:
An example dashboard with the updated colors inputted alongside the formal documentation for the Design System.