Is your color scale good enough for humans?


One of the problems when designing or choosing color scales for cartographic design is the need of not lying with the colors. Let's say that one of your colors is "accidentally" highlighting some range/category. Or the color separation is not enough to tell the difference between two classes. There are several ways to mislead an observer just by a bad color election.


To stay safe with colors and their impact on the audience, the first step is playing in a perceptual oriented playground. Because, in the end, the users of our designs will be mainly humans. So, set aside RGB, CMYK, HSL, HSV, etc. that are based on the physics of light, and choose a color space focused on the perception of the colors by human beings. Choose your color nodes in that color space, perform the interpolations to generate the gradients there and, once done, you can always export the results to the format or color space required in your project. That being said, CIE L*a*b* color space should be your weapon of choice.


If your starting point is a sketch of a scale made in a "traditional" color space or a list of selected color stops, you should start by translating it to CIE L*a*b* space and then use Bezier interpolation and lightness correction, as explained here to get a smoothed scale with no unwanted peaks. You can also use Cube Helix to build your scale, which is great for later printing in B&W. A shortcut might be going straight to CCST and design and test your color scales there. There are lots of other online tools for color scales design, but CCST is mine :P


I have made this little tool below just to showcase how bad in terms of human perception might be some of the most used color scales. And how good are some others like the good ol' ColorBRewer2 by Cynthia A. Brewer, or the fantastic work by Mamata Akella with CartoColors. Or just check the ones you have made on your own. This little tool is based on the CIELAB Delta E* 2000 which is a metric of the perceptual distance between two colors, symbolized as ΔE* 00. Being 0 for the same color and 100 for the opposite one. Using the values in the table here as a loose guide, we can decide whether our scale is polished enough for publishing.



Just paste your color scale as a list of hex values in the text box and click the Check button




The first check when testing quantitative scales, should be to verify that the differences between colors next to each other in the scale are perceptible at a glance while being more similar than opposite. Values between 2.3 and 49 should do the trick, but the values should also be all in the same range, so the color variation is uniform along the scale.







In the case you are working with qualitative scales for your categorized data, each color should be checked against each other to guarantee that the color separation is correct regardless the pairing.


This is also needed for divergent scales, where colors placed symmetrically in the scale might be too close and lead to mistakes.


For sequential scales, this matrix is of no use. Because of the monotony in the colors variation along the scale, the former check for neighbor colors should be enough.



Abel Vázquez Montoro, 2018-03-19