Product Designer
Selecting colors from the wide range of Categorical colors - those designated for use in visualizations - can be tricky for designers, possibly leading to a less-than-optimal use of a palette tailored to meet product needs and standards.
And more...
“Status indicators are crucial for decision-making, whether in bad visibility conditions in a mine or dealing with screen glare. Difficulty in identifying a status could compromise the success of an entire operation.” - product manager
Recognizing the importance of colors for severity and status in anomaly detection and issue identification, we've received feedback regarding the need to adjust the contrast of the Semantic color palette. The concern is caused especially by the similarity between the oranges and reds.
With these challenges at hands, my initial step was conducting competitive benchmarking by researching other Design System solutions related to status, aiming to identify common patterns. Here's a summary of my findings:
For the categorical palette, I identified a standard set of colors as the common baseline, complemented by an extended palette tailored for highly specific use cases. This concept aligns closely with the Miller's Law, which addresses a memory limitation of 7 (+-2) items for an average person, as mentioned by Craig Barber in the Miller's Law in UX Designing for the Human Mind.
The technique I used for creating the Semantic palette involves maintaining the same hue while exploring opposite levels of saturation and value. Yet, when creating a traffic light-like palette, some challenges can arise.
There are multiple tools available to help define colors. I used the Palettte to calculate saturation and value levels and later to define new hues. To ensure accessibility, I used a contrast checker and occasionally Adobe Color for inspiration and to calculate contrast ratios.
My first attempt at creating yellowish shades resulted in three colors with sufficient contrast to meet accessibility standards.
Is the third and darker color still yellow, or is it shifting towards a brownish tone?
Sometimes, it's necessary to step back from perfect calculations and techniques and take a more flexible approach to achieve our goals.
With this in mind, I tried different methods. I reintroduced orange from the original palette and used two hues, converging the central color to create a yellow-to-orange range. I iterated on these options several times, incorporating feedback from A/B tests shared with my peers. Eventually, I settled on a satisfactory solution.
Now, let’s focus on the Categorical optimized palette. For this update, my main concerns were maintaining contrast and minimizing color blindness issues. Another challenge was to avoid using colors from other sets, like the semantic palette, that can tend to be confused.
To update the palette, I studied the existing one to identify patterns and reusable structures. I reduced the number of colors and adjusted luminosity and saturation to find an ideal set. My first attempt resulted in three options.
-
It’s a smaller set with a wider range of hues, ensuring good differentiation and adaptability.
- I refined the initial hues and maintained the order to minimize challenges for colorblind users. You can find the colorblindness-proof tests in this tool.
- Adjusting luminosity and saturation provided good differentiation for colors like yellow, red, and green compared to the more vivid semantic colors.
We updated our documentation to encourage designers to avoid extending the palette when possible. However, we also added an extended version for edge cases.
Want to see the final results in action?
While the NEXT Design System palette maintains its familiar approach with a few updates, I've started a new journey within another team that has its own design system, using NEXT's palette as a baseline. Here, we're embracing fresh perspectives, such as the color token approach, by establishing a unique base palette and incorporating it with meaning and usage guidelines.