Philippe Verdy
Aug 23, 2017 · 2 min read

Anyway this is not enough. Your article does not speak about “color blindness” which is quite common and does not allow distinguishing distinct colors if they have roughly the same lightness.

Experience shows that color palettes based on hues that are complementary on the color wheel have poor readability compared to those that use hues with a common RGB component (i.e. spaced by **odd** multiples of 60 degrees and not **even** multiples) and that the worst palettes whose hues are spaced by 120 degrees are those using green (palettes using red vs. blue are better, but not as much as red vs. cyan or magenta, or blue vs. cyan or magenta). If you need to distinguish more than 2 colors, you should avoid placing them at multiples of 60 degrees, but must still space them by at least 30 degrees. But this must be your last choice: contrast of lightness is the first thing to consider, and you must know that distinctions of hue is maximal only at medium lightness and maximum saturation levels.

Low saturation turns your images to grey scales and this is what the rare peopl that are fully color blind will see: contrasting lightness is the first distinction to keep.

The next problem comes with the common deuteratopy: poor distinction of hues around green at the same lightness, and espacially more if the colors are desaturated (notably green vs. orange and the intermediate “beige” color: this is the kind of colors of skin: avoid distinguishing them, and make sure you’ll contrast if clearly using either plain black or white; notably for text, or that your bars and plots in graphics will not distinguish these hues with green or orange: use red or blue instead, and if you use magenta, avoid using also red and blue simultaneously as people will have difficutlies to distinghish red/magenta and magenta/blue pairs with the same lightness, unless you enhance these pairs by using distinctive differences of saturation levels in these pairs)

Finally don’t use more than 3 saturation levels and note that black/grey/white is the same desaturated level where you can distinghish at most 6 levels of lightness (2 of them being white and black).

You’ll also need to avoid stressing eyes with excessive contrast of lightness (this has bad effect on reading due to the “ghosting” persistence of high contrast borders when moving eyes, which will also create color artefacts around these contrast borders). Black text on white will look better, more readable, less stressing, with #222 black on #FFF white instead of #000 black on #FFF white (excessive contrast stress has the effect of slowing down the reading speed: the eye will need to pause longer on each word, but you can use this effect only on specific words you want to emphasize, it has an effect similar to bold typography, but more subtle).

)

    Philippe Verdy

    Written by