Color and Accessibility

In the United States, about 7 percent of the male population – or about 10.5 million men – and 0.4 percent of the female population either cannot distinguish red from green, or see red and green differently (Howard Hughes Medical Institute, 2006). And, more than 10% of the male population is color-blind in all over the world. There are various forms of color-blindness: red-green, green-brown, and so on. Of course, we cannot possibly avoid all of the colors that could be misinterpreted by all visitors with color vision impairment.

Nonetheless, it’s easy enough to make sure our pages are legible to anyone with color vision impairment. As already stated (repeatedly), there must be sufficient value contrast between the foreground and background colors such that the hue itself is irrelevant for legibility, as demonstrated below.

red-green-color-impairment

For instance, in this figure C and E would be legible to the same viewer, because the former uses different values (light versus dark), while the latter places both colors on a neutral background. Again, viewing your page in grayscale mode can show whether or not there is sufficient value contrast when the color information is removed.

In addition to paying attention to value differences, we should also make sure that color alone is never the only clue to meaning. For instance, traffic signals are still discernible to the color-impaired because the red and green lights are always in the same position. One area that we need to be particularly careful of is navigational links. If color is the only cue for distinguishing links from normal text, then colorblind visitors might not be able to distinguish links from normal text. Therefore, we need to make sure to use other affordances on the links as well, such as underline, boldface, or italics.

Translations

French (alsacréations.com)

Related Resources

Techniques for Web Content Accessibility Guidelines 1.0

How People with Disabilities Use the Web

Designing More Usable Web Sites

Wikipedia – Color Blindness

Related Tools

Color Oracle – Design for the Color Impaired

Fangs – The Screen Reader Emulator For Firefox

10 Colour Contrast Checking Tools to Improve The Accessibility of Your Design

Jonathan Snook – Colour Contrast Check

There have been 7 comments | Subscribe to Comments | Jump to Form »

Brady J. Frey

I’ve been tested colorblind since I was a kid (red/green), but I must say only the top right design throws me off for a second, the others are plain as day… and to boot, I agree it’s much more than color I see. As an Art Director who worked my way up from a screen printer to a production artist to a production manager and so on, I cam color correct and mix paint just fine. It’s all math to me. Granted, not much green in my designs, though:)

1

Marty Picco

If you have an iPhone, you might want to try HueVue: Colorblind tools. HueVue identifies colors, simulates color blindness, and has color matching and coordination features.

While HueVue was designed mainly with colorblind people in mind, it is also useful to see how any image would be viewed by a colorblind person.

Check out http://www.huevue.com.

2

Erietta

I wrote a related post here, inspired after watching a great documentary on the subject called Cracking the Colour Code. Thanks for including those pics, and references.

Thinking about colour is important. Not only in terms of color blind users. I often come across (web) designs with low contrast where even a well sighted person can miss important elements. Colour is a great tool to provide emphasis and direct the eye.

3

Davlin Labs

I’m a big advocate of accessibility, and I love to learn as much as I can about it. If you haven’t seen the video of the blind man using a braille reader on his computer to browse the Web, I highly suggest you do.

Check it out here.

I also included that video in a post here.

Overall, while I was aware of it, color blindness kinda just sat in the back of my mind, overshadowed by full blindness, when it came to designing. Thankfully, as a rule, just about all of my designs so far have had good contrast between background and content.

Enlightening post.

4

Anne Moss

You know, I have not even considered the fact that so many in our population are at least partially color blind. I think it is particularly important since you mentioned the hyperlinks. I have to wonder how many people miss them because they don’t register the color.

5

Ben Glover

It may be time for the transportation community to look at a newly designed traffic signal that is simple, can readily replace with minimum confusion existing signals, and makes distinction of colors easy for the color impaired. That signal is a newly patented (#7764195) 3-Arrow LED Traffic Signal System. This signal will revolutionize traffic signalization and eliminate all of the current issues with current circular lens traffic signals. Additional infomation can be obtained at baglover@randomc.com.

6

Maxqua

Hi,
There is an interesting color picker for accessibility at the following address. It worths a try.

http://www.my-pc.it/extras/accessibility-color-picker.html

7

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.