Notes from an Oakland designer


Color blindness and designing for accessibility

My husband works for a large company that is completely enamored with Powerpoint. These ubiquitous slideshows are used by every department for both internal and external meetings and presentations.

I can’t tell you how many times he’s come home complaining that he couldn’t call out the red-highlighted bits on a projected Powerpoint — the same bits that were intended to call attention to themselves as “something very important to pay attention to” were essentially invisible to him.

Plate 29 from the Ishihara Color Vision Test

He happens to be red-green color blind, a trait he shares with about ten percent of the male population in this country, and with 3% of females.

Designing with the color-blind population in mind is a too-often overlooked part of thinking about accessibility.

My clients with brick-and-mortar businesses have to consider laws governing accessibility for the physically disabled, but it rarely occurs to them to extend the same courtesy to the vision-impaired’s ability to access information about their business on their websites.

That’s when I have to put on my educator cap and bring them up-to-speed with how having an accessible website can impact their potential Search Engine Optimization (SEO). I doubt any business owner would consciously choose to alientate a paying customer, but when one can’t find the link to make a purchase or sign up for your newsletter, you’ve missed a potential sale.

Web designers and developers know that Google search rewards websites built with in accordence with web standards and accessibility in mind with higher rankings—and everyone wants good SEO. But why stop there? I don’t know if Google weighs designing for a color blind audience as part of their algorithm (anyone have info on this? I’d love to know more: let me know in the comments), but I see no reason not to include it in your planning for a design.

The bottom line is if you’ve designed a website and a decision-maker in your audience can’t see links or call-outs due to uninformed choice of color, you’ve blown an opportunity to communicate effectively—and isn’t that missing the whole point of graphic design?

Three Tips for Color Blind Accessible Design

  1. Color choice: Avoid using red for text links embedded within black text, unless accompanied by another differentiating text style such as underline, to call out its clickability to those who can’t see the color. Careful choice of color should extend to hues that are in close proximity to one another in your design: a red button on a green background may become a sea of brown to a color blind user.
  2. Testing: Use the Colorblind Web Page Filter to preview how your design may appear to the color blind. If you’re on a Mac, you can also try out Sim Daltonism, a real-time color blind filter.
  3. Media: Keep in mind that hues that can be seen by a color blind person on a printed surface sometimes don’t work on-screen, so it’s important when testing with live subjects to show the work in its intended medium.