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) and I want to share a very nice result I got: How to make the really websafe colors safe for colorblind people with minimal changes.

mostly websafe and colorblindsafe websafe but NOT colorblind safe

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

To do so, I turned to Color Oracle (for simulation of colorblindness directly on my screen) and Emacs rainbow-mode (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.

websafe-colorblind-safe.png14.65 KB
websafe-not-colorblindsafe.png14.51 KB

Use Node:

⚙ Babcom is trying to load the comments ⚙

This textbox will disappear when the comments have been loaded.

If the box below shows an error-page, you need to install Freenet with the Sone-Plugin or set the node-path to your freenet node and click the Reload Comments button (or return).

If you see something like Invalid key: There is no @ in that URI! (Sone/search.html), you need to setup Sone and the Web of Trust

If you had Javascript enabled, you would see comments for this page instead of the Sone page of the sites author.

Note: To make a comment which isn’t a reply visible to others here, include a link to this site somewhere in the text of your comment. It will then show up here. To ensure that I get notified of your comment, also include my Sone-ID.

Link to this site and my Sone ID: sone://6~ZDYdvAgMoUfG6M5Kwi7SQqyS-gTcyFeaNN1Pf3FvY

This spam-resistant comment-field is made with babcom.

Inhalt abgleichen
Willkommen im Weltenwald!

Beliebte Inhalte

Draketo neu: Beiträge

Ein Würfel System news