A Certain Shade of Green: 30 Days of Accessibility Testing

The Ministry of Testing has declared that May should be "30 Days of Accessibility Testing". As in the days of yore when I used to take on these challenges and blog regularly, I'm in the mood to get back to doing that. Therefore, I am looking to write a post every day around this topic and as a way to address each line of their checklist.

18. Use a tool to test for colour contrast problems.

It seems I'm giving WebAim a lot of love this month, and there's a reason for that. They do a good job of taking Accessibility concepts and breaking them down into hands-on tools that a user can play with to understand what they are looking at and ways to play how-to scenarios with them. WebAim's Color Contrast Checker fits squarely into that niche as well.

The Color Contrast checker needs two values, a background color & a foreground color. You can choose any of the hex values that make up a color code and either enter them into the two text boxes provided, or you can enter them into the URL directly like so:

http://webaim.org/resources/contrastchecker/?fcolor=0000ff&bcolor=ff0000

The resulting screen will display the values, and then give you options to lighten or darken the foreground and/or background, and see both the Contrast Ratio as well as what the contrast would look like on a page if it were used.

As we can see, that's not a really good ratio, and that would be hard to read even for normative vision users. 

Let's adjust those values to something a little more reasonable, shall we?

By clicking the Lighter/Darker links, we can change broadly the shade that is selected. By clicking on the actual text box, we can bring up a color picker and choose a color that we like:

The color picker gives you two regions. One gives a large selectable color palette, and the other provides an arrow slider so you can select the level of saturation for that hue. Regardless, the end result is a hex value that is represented in the corresponding text box. With that, you can see if your contrast level passes, and the contrast ratio value.

What's this useful for? If you are responsible for reviewing CSS or otherwise determining contrast levels for text, backgrounds, widgets, etc. This allows you to look at corresponding colors, experiment with variations, and see what works both aesthetically and numerically. Granted, it's not going to let you look at your pages directly (there's other stuff for that, and I'll post links later in the challenge) but for now, if you want to get your feet wet, here's a good place to start.