Thursday, April 24th, 2008

Using canvas to test your site with colorblind folk

Category: Accessibility, Canvas, Library

Color Matrix

The picture above is showing you how someone with the color blindness trait Tritanopia would see the image. Michael Deal first created the Color Matrix Library, which supports a large portion of the most common color functions available, including:

Hue, Saturation, Brightness, Contrast, Exposure, Temperature, Tint, Channels, Blindness, Colorize, Threshold, and Invert

Michael then created a canvas library that uses the Color Matrix to help us visualize what our content may look like to people who have various color blind issues. Here is what he did:

The most obvious way would be to do the calculations in CIE XYZ using confusion lines, however, <canvas> uses RGB. So you’d have to convert from XYZ to RGB, run the confusion lines, then convert back to RGB. Here’s an example of what that looks like: Color Blindness Library — It’s great for running on a few colors, but too slow for larger images.

Matrix’s are generally about as quick as you’re going to get for generic color filters, so that’s what I’ve converted the formulas into – compliant with Actionscript’s ColorMatrix, and other programming languages that use standard RGBA matrix’s. Also, I’ve converted them into color transform’s which are useful in Actionscript (ColorTransform), Pixelmator (Image… Channel Mixer), and Photoshop (Image… Adjustments… Channel Mixer).

I used data generated by Matthew Wickline’s formulas to base my blindness library. My script triangulates the hue by comparing the un-filtered, completely saturated, RGB values with the same value after they’d been run through Wickline’s formula.

Posted by Dion Almaer at 1:35 pm

4.3 rating from 30 votes


Comments feed TrackBack URI

Wouldn’t it be easier to use SVG for that ? Plus SVG can import foreign objects such as an entire web page. Which page remain active.

Comment by p01 — April 25, 2008

as someone who is color blind (red/green issues) – I have often thought it would be great if some people would consider this when they are designing sites and games. Often times when I am looking at something, if something uses 2 similar shades, I have to ask someone else to tell me the difference.

Comment by MattEllsworth — April 25, 2008

p01: It may be easier, but this is a demo of what can do. It would really simple in Flash as well, because Color Matrix is built in… it really wouldn’t be an article then. This article dissects how a Color Matrix works. The code can be simply ported to any other language that uses Color Matrix’s (including SVG, Flash, ect.). Hope that makes sense.

Comment by mudx — April 25, 2008

It sure does. I thought it was worth bringing up that it is possible using another open standard ( SVG ) and the possible advantages.

Comment by p01 — April 25, 2008

Leave a comment

You must be logged in to post a comment.