

#Accessible colors manual
Attempt #3: the solutionĪfter a lot of wrestling and iteration we landed on a solution that required both flexibility (loosening the rules) and manual curation:ġ. If a data category relies on the neighboring colors in order to achieve sufficient contrast, it could fail as soon as users begin interacting with the legends. Unfortunately for Attempt #2, the legends in our charts allow users to filter and isolate data sets. With low contrast colors in the mix, the visualization brightens and distinction between colors is improved however, steps will need to be taken to meet minimum contrast against the background for lighter colors. The Carbon team used this method to define our first-generation categorical palette. First, they eliminated the semantic colors (colors that denote values like warning or danger), and then they sequenced the swatches by skipping between color steps (or shades) and families. Several co-workers at IBM had previously introduced a method for picking accessible color sets computationally. For the final outcome, skip straight to Attempt #3. To shed some light on how we arrived at a solution, I will briefly recap two of the rejected attempts at solving this challenge.

Sequenced: in order for the palette to be effective in visualizations with as few as 2, and as many as 14 categories, the colors need to be sequenced in such a way that differentiation and diversity is evenly distributed.Diverse: as a set they should avoid false associations or correlations due to similarities in brightness or hue.Differentiated: they should have a sufficient visual contrast among themselves (optimized for all color deficiencies).Colors in a categorical palette need to be: It wasn’t enough to just define the palette - the sequence in which users apply the colors and the way they combine them to form a set also affects accessibility. Our categorical palette presented a much more challenging problem. Since Carbon’s sequential palettes are either mono- or duo-chrome, we didn’t have to worry so much about hairy color combinations. Stroke in background color help with clarifying countries’ boundaries Accessibility and the categorical palette
