Check My Colours: Stop Beating up Blind People

Ever had one of those days where you wake up in the morning, pour a cup of coffee, then walk out into the street with a cane and beat down all the handicapped people you can find? I mean, sometimes you just have to make life harder for someone else, in particular the downtrodden and oppressed. Well as it turns out I’ve been doing exactly that every day, in 56 different ways. At least according to a new website, Check My Colours.

Colorblindness is a common vision deficiency. Its prevalence among men is up to 10% of the population. For women it’s less than a percent. Since I’m an astoundingly inaccurate mathematician I’ll average them and assume that 5% of the people who come to your website have difficulty distinguishing between colors in some capacity or another. The lot falls to designers to make a website color blind friendly. Determining which colors might need to be adjusted just got a lot easier with the new Check My Colours tool. All you do is submit the URL and it will list the offending objects and their associated colors.

The report includes three different categories including contrast ratio, brightness difference and color difference. From there it’s expected that you would adjust your CSS to modify the offending elements. Now this is where the trouble begins. Let’s assume that I’m not a color aficionado and the distinction between contrast ratio, brightness difference and color difference isn’t something I have a firm grasp on. Then what? I’m guessing I’m not the only one who would be taking a stab in the dark at finding a less malevolent color. Key suggestion: tell me the range of hex colors that would work with both the background and foreground colors. I’m sure the logic is already right there within the application so it’s just a matter of putting the info on the screen.

Test your new contrast colours here
Test your new contrast colours here

The next grievance with Check out my Colours, baby, is with the accessibility of their tools. Specifically, it contains the instructions at the top of the chart, “Click on the row to test other colours.” That’s great, but I’m always lapse to click somewhere, anywhere, within a general undefined area. I know Javascript allows you to set it up so that I can click on the entire row, but my vote is for a clear and defined button within that row to bring up the color contraster tester tool. And likewise I’d opt for an exit button as well. These UI features are fairly common and might confuse people without them.

Moving along, on the path to critiquing an otherwise pristine product, is the nice green submit button to the left. Try clicking it, if you dare. Once you have submitted your colors you can now sleep well knowing that your colors have successfully been submitted. To what point and purpose I do not know. But yes, they have been submitted. Once you click away from the tester tool you will notice that a few cells in the row are now an equivalent green. I’m not sure if it accomplished anything other than that.

Overall the Check My Colours site is probably best in its class as far as providing information that may help designers create color friendly sites. Interestingly, all the sites that I tested came up far short of passing the color test, with the exception of Check My Colours itself. Perhaps with a few tweaks and modifications this site will grow to be a tool common to the arsenal of designers. Then everyone can feel better about themselves knowing that they’ve made a world a better place for the color blind. That and it will likely at to the stickiness of your site.

SlapBack: Hi :)

I’m reading your review and it seems very interesting. Now, I try to address some of your doubts :)

You write: “I’m guessing I’m not the only one who would be taking a stab in the dark at finding a less malevolent color. Key suggestion: tell me the range of hex colors that would work with both the background and foreground colors.”

The range of hex colours are specified in the homepage, in “What is check my colours” section:
Text or diagrams and their background must have a luminosity contrast ratio of at least 4.5:1 for level 2 conformance to guideline 1.4, and at least 7:1 for level 3 conformance to guideline 1.4. The range for color brightness difference is 125. The range for color difference is 500.

These values are suggested by the world wide web consortium.

More documentation here:
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast
http://www.w3.org/TR/WCAG10/wai-pageauth.html#gl-color

Checkmycolours is meant to be a tool for web developers, so I didn’t think so necessary a detailed documentation. Now, the webapp is used by many many users so,I will write a more complete documentation as soon as possible :)

Then, you write: “The next grievance with Check out my Colours, baby, is with the accessibility of their tools. Specifically, it contains the instructions at the top of the chart, “Click on the row to test other colours.” That’s great, but I’m always lapse to click somewhere, anywhere, within a general undefined area.”

Yes, this is a good observation, but it is related to usability, not accessibility.

And, at last: “What’s your best guess as to what the Submit button actually does?”

The submit button simply updates the hex values in the report and highlights it with a different color. So, the developer can easily get the correct values and replace them in the stylesheet :)

Thanks for your suggestions. I’m receiving many mails from many users, so I hope to be able to solve bugs and implement new features as soon as possible.
In next day I will probably publish a blog about these issues and the next updates, so… stay tuned :)