ColorScope.js

ColorScope is a Javascript bookmarklet for simulation various forms of colour-blindness on a browser's current web page. Here's an introductory blog post.

Try it out - Direct link to bookmarklet

Example

Before:

After:

Known Issues

• Very slow for pages containing a moderate number of images.
• Images located on external domains cannot be translated because rendering their contents taints the canvas element, making toDataURL() unavailable.

TODO

• Progress meter
• Prevent double invocation
• Investigate using webworkers for image translation?
• Support more CSS attributes, possibly SVG too
• It would be cool to investigate possibilities for monkey-patching the canvas 2D context to do automatic translation whenever fillStyle or strokeStyle is updated.
• I'd like to have a go at redoing this as a Chrome plugin. I think this would allow me to get around the various security restrictions.

Hacking

1. npm install uglify-js
2. make
3. serve this directory from a local webserver running on port 4000 and hit up test.htm.

License

© 2013 Jason Frame [ @jaz303 / jason@onehackoranother.com ]
Released under the MIT License.