Florian Evequoz / 2016-04-30

Colorblindness Simulator

Ever wondered how a colored chart would look like to someone with a color vision deficit? I did. That's the reason why I have developed a small library to 'daltonize' colors in Javascript, based on color matrices found there and relying on some D3 shortcuts for manipulating CSS colors. In the application below, I apply this library on the famous ColorBrewer scales.

Select colorblindness type:

You'll find the library here. Just include it in your code, after having imported d3.js, and use

 dalto(color, anomaly)

to convert 'color' to the color that a person suffering from 'anomaly' would see. The global variable 'Anomalies' contains the names of all supported color vision anomalies.

You'll see that the code is pretty rough at the moment. It could be adapted to be more developer-friendly for use with D3 color scales. That's on my todo list for rainy weekends.


ColorBrewer's colors are released under the GNU General Public License, version 3. The source code for the 'daltonize.js' library is a slightly adapted version of this code for which I have found no licensing information.