Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Colorblindness Simulation with JavaScript.

3.7.2015

Around 4% of humans have some form of colorblindness. Since that's a significant portion of your web site traffic, it's probably worth doing some testing for how your site would look to those users. One way is the simulate.js from http://mudcu.be/labs/. For each image in an array of images, this JavaScript adds a new canvas element with shifted colors. Below is an example usage for Deuteranope type vision. The script also includes functions for Protanope and Tritanope type vision.

var images = scope.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  Color.Vision.Simulate(images[i], {
    type: "Deuteranope",
    callback: function(canvas) {
      document.getElementById("lid_623").appendChild(canvas);
    }
  });
}

Below is the script in action: the fruit bowl and rainbow images are shown normally, and below each is simulated with deuteranopia, protanopia finally tritanopia.

Alessi fruit bowl, filled by Dirk Ingo Franke / CC 1.0 Public Domain http://commons.wikimedia.org/wiki/File%3AFruit_basket_alessi.JPG Rainbow from Budapest by Takkk / CC 3.0 http://commons.wikimedia.org/wiki/File:Rainbow_in_Budapest.jpg

The canvas element seems a tad unreliable - refresh the page once or twice to get the new images to load. It also can't be added when Codepen.

Permalink

Tags: accessibility code javascript

Authorized users may log-in to leave a comment.

Last Blog: Why I Finally Switched From GoDaddy.

Next Blog: Epic Recruiter Fail.