Custom CSS Filters for emulating colour blindness

Last August I went along to the London stop on the Adobe Create the Web Tour at the Vue cinema in Leicester square.

The day was mostly filled with Adobe showing off their new web-focused tools and techniques aimed at creating content for a modern web. Basically no Flash or action script but a slew of Javascript, CSS and HTML5 instead. The event was well organised and pretty much all their new tools impressed me and inspired ideas in my head about how I could find uses for them in my workflow.

One demonstration from the very beginning really got my mind working and that was Adobes proposed custom CSS filter specification: http://html.adobe.com/webstandards/csscustomfilters/

From the second they showed a demo of using standard OpenGL ES Shading Language in CSS to apply vertex and fragment shaders to any CSS-selectable element I was dying to get my hands on a copy of Chrome Canary to enable the preference and start playing with the Adobe Filter Lab. Unfortunately the Filter Lab only supports their filters, a few custom ones you have to fork on github to edit or import gists. I just wanted to tinker locally so I set up a test page with a few bits of text and some images and set to work.

While most of the examples are generally pointless visual effects like page turning and burning I wanted to try and come up with practical use. So I figured I’d try and get dynamic colour blindness emulation going in the browser in real-time without the need for third-party applications or browser extensions.

The custom filter I ended up with is just a simple fragment shader that does a matrix transform on each pixels RGBA values to adjust the hues visible to emulate colour blindness of various types. This is my first attempt at writing a CSS filter and my first time with the GLES Shader language so if you spot something wrong make sure you contact me and let me know where I could improve.

Click Here or the screenshot above to check out the custom filter if you have Chrome Canary installed with CSS Shaders enabled in about:flags as shown in the following image.

Open up firebug and have a play around with it. Changing the CSS so a filter works on the entire body or only on hover is quite good and reasonably performant for a first draft spec and my first attempt at a shader.

The accuracy of the colour blindness types is currently dubious at best. I haven’t conducted any research or cross checked my results. I was mostly working towards getting the CSS filter implemented. If anyone knows a good source of data relating to the colour-model differences for various types of colour blindness so that I could improve the accuracy of my shader get in touch.

The files are all on my GitHub as well, so feel free to have a look and fork it and send me a pull request if you have any ideas.