Challenge
The Qualitative Palette chart colors used in Fiori, main SAP design system, needed to be changed. The main reason for that was poor accessibility. Minimum contrast ratio was way too low in Belize theme and insufficient to be distinguishable colors for high contrast themes.
What is Qualitative Palette
Qualitative palette uses differences in hue to represent nominal or categorical data.
Colors in the qualitative palette do not carry semantic meaning.
All colors have equal importance. (e.g. multiple departments in the same company).
Requirements
• Pick the most different and distinguishable 11 Hues.
• The minimum contrast ratio has to be 3:1 and 4.5.
• Avoid too dark colors to keep balance in the layout.
• Not too bright colors to avoid “screaming” charts in the layout.
• Avoid Semantic colors.
• Qualitative Palette colors should translate well between themes.
• Picked colors should work together with Fiori color scheme.
Process
Spectrum to Rainbow
Qualitative schemes should use differences in hue to represent nominal differences or differences in kind. The lightness of the hues used for qualitative categories should be similar but not necessarily equal.
Well, the main problem is that the value component of HSB is just a measure for the physical lightness of color, but not for the perceived brightness. Thus, fully saturated yellow has the same “value” as blue. The same is true for the HSL color space. Here is a set of six colors of the same value to demonstrate this effect. The second row shows how the colors look after converting to grayscale via Photoshop.
A more scientific approach
We need 11 different colors for the qualitative scale. To get them as distinguishable as possible I picked the 11 base colors on a linear distribution across the whole visual spectrum. This means that all of the selected colors are similar in brightness and saturation, but different in hue. Furthermore, the linear distance between those six colors had to be as equal as possible.
With this approach, we received a solid foundation that we were able to refine in hue and vary in brightness and saturation. But they are not pleasant colors ready to be used in charts.
Order & Color Rule
It’s impressive how much sorting influences the effect when colors get applied to visualizations. This considered, it is a conscious decision to define a fixed order in which the colors show up.
• Lightness adjustments to differentiate as much as possible similar hues.
• Reorder to have good color combinations.
• Make sure first colors, which are most used and visible, fit and work the best.
• Updated colors shouldn’t bring difficulties for users on switch.
Delta E
Delta E is the measure of change in visual perception of two given colors.
The main purpose of the colors in charts being distinguishability between elements, these calculations helped in defining the order as the choosing of the most distinguishable colors.
For curious ones here's the link excel file Link
Minimum Contrast Ratio
Charts background is always white (in Belize theme), therefore all the colors are measured against white and have to fulfill a minimum contrast ratio of 3:1. It was agreed with accessibility team that a ratio of 3:1 instead of 4,5:1 would be enough because usually the area of charts elements are bigger and color shouldn't be the only way for understanding the data.
Color Blindness
Color blindness is pretty common so the charts should not ignore these people. Deuteranopia, Protanopia, and Tritanopia the most common color blindness types, unfortunately, there is never a one palette fits all these cases. That's why provided colors can be slightly tailored for these needs, but the main solution is to always have an alternative way of understanding the data beside colors.
Final Result
It’s worth mentioning that besides 11 provided base colors, we now cover double the number of available categories. We’re doing that by having additionally the same sequence of first 11 but darken or lighten version of them. This being said we still recommend using not more than 7 colors in a chart.
Use semantic colors for a meaningful representation, qualitative colors should not carry any meaning with them.
• • •
