Making websafe colors safe for colorblind people

I just made the colors of my plotting framework safe for colorblind people (thanks to Paul Tol’s notes [1]) and I want to share a very nice result I got: How to make the really websafe colors [2] safe for colorblind people with minimal changes.

(the colorblind-safe colors are on the left, the original websafe colors on the right)

To do so, I turned to Color Oracle [3] (for simulation of colorblindness directly on my screen) and Emacs [4] rainbow-mode [5] (for seeing the colors while editing the hex-codes - as shown in the screenshots above) and tweaked the color codes bit by bit, until they were distinguishable in the simulation of Deuteranopia, Protanopia and Tritanopia.

The result were the following colorcodes:

The changes in detail:

- olive = "#808000"
+ olive = "#707030"

- lime = "#00ff00"
+ lime = "#00ee00"

- aqua = "#00ffff"
+ aqua = "#00eeee"

- green = "#008000"
+ green = "#009000"

- teal = "#008080"
+ teal = "#00a0a0"

- purple = "#800080"
+ purple = "#900090"

Unchanged colors: Silver, Gray, Black, Red, Maroon, Yellow, Blue, Navy, Fuchsia (and naturally White).

Caveeat: Naturally this change makes the colors less websafe, but they still stay close to their counterparts, so simple designs which use these colors can be adjusted without disrupting the visual appearance. Also this change provides a nice, small rainbow-color palette which works for colorblind people. I use it for coloring lines and symbols in plots. Being not safe for colorblind people is a sad design failure of the websafe colors - and as such of displays in general - because as I show in this article, a small adjustment to the colors would have made them safe for colorblind people. In an ideal world, the browser-developers would now come together and decide on a standard for display of these colors, so that they also become completely websafe. In the non-ideal world we live in, I’ll just specify the colors by hexcode, because accessibility trumps design.

Disclaimer: I’m not a usability or accessibility expert. I just do what I can to make my works accessible to people. If you find errors in this article or want to suggest improvements, please contact me [6].