"Reaction [beta]"

Shades of accessibility 20 May 2006

Here's a quick example of how to make colour-coded information accessible to colour-blind users...

The first image displayed below shows how Holmes Place's gym timetables appear to those of us that aren't colour-blind. The following three images show how the timetable appears to people with:

  • Protanopia (inability to distinguish between colours in the green-yellow-red section of the spectrum).
  • Deuteranopia (inability to distinguish between colours in the green-yellow-red section of the spectrum).
  • Tritanopia (a rare from of blue-yellow colour blindness).

How people who aren't colour blind see the timetable:

How people with Protanopia see the timetable:

How people with Deuteranopia see the timetable:

How people with Tritanopia see the timetable:

As you can see, the timetables use different colours to denote different types of classes - red denotes a conditioning class, blue denotes a cardiovascular class, yellow denotes a holistic class and so on. But these colours can be very difficult to differentiate if you're colour-blind. Those with Deuteranopia and Tritanopia, for example, will find it extremely difficult to differentiate between combat and conditioning classes, and even those with perfect vision will struggle if reading from a black-and-white printout.

Holmes Place recognises this problem and provides a solution - the information conveyed by the colour-coding is also provided in written form - see the "exercise type" column.

Is your website accessible to colour-blind users? Try our colour-blindness simulator.

Next article: To hell with WCAG 2
Previous article: Five days bonus! M&S revisited

Bookmark this page

Add this page to your list of social bookmarks.


To create a TrackBack to this entry simply append ping/ to the permalink URL for this page.

Send page to a friend

Enter your email address to subscribe to our free newsletter.
Your email address will never be sold or given out to anybody.