Usability: Color Blindness on the Web
About 10% of men suffer from Color-Blindness. How can we build our Web Site keeping color-blinded people in mind? By Eng. María José Serres, ARTech's Marketing Team
What Does It Mean To Be Color Blind?
Color blindness refers to the inability to
discriminate colors in a normal way. It's a hereditary disease associated to a
recessive gene linked to gender. It's caused by a lack of one or more
light-sensitive substances located in the retina.
Color blindness is caused by a recessive gene in the X chromosome.
It rarely occurs in women, while in men can be present at different levels of
intensity, in 10 out of 100 men (between 8 to 12% of the world's male population
suffers from this disease).
The most common type of color blindness is the discrimination between red and green, from a slight to severe degree. The second most common type of color blindness is the discrimination between blue and yellow, with a lack of discrimination between red and green usually associated to this type.
British chemist and physicist John Dalton was the first one to observe this condition, who in 1794 published an article describing color blindness. This scientist also developed the atomic theory on which modern physics is based. (http://es.geocities.com/fisicas/cientificos/quimicos/dalton.htm)
The most severe type of color blindness is achromatopsia, or inability to see any color, which is usually associated to other problems such as amblyopia (lazy eye), nystagmus, photosensitivity and extreme poor vision.
There is no known treatment for color blindness. However, the visual skills of most color-blind people are normal in all other aspects.
Why should we consider this issue?
If
we do not create a color-blind -friendly application, then we have a high
percentage of users who cannot see all of the content displayed, all the actions
shown, all the information to be accessed. In addition, they see our application
in a different way from the one originally intended.
How can we create a site for the color-blind?
- Avoiding certain color combinations: red and green; yellow and blue, specifically.
- Checking the site with tools such as Vischeck, and improving colors and their combination so color-blind people can see them.
- Using colors the color-blind can see. (Under sites of interest/color tables you will find some sites on this topic.)
Tools
Test your site or images to check whether the color-blind can see them:
WhatColor
Tool to identify colors; it shows the RGB
code and the color's name.
http://www.hikarun.com/e/
Eyedropper
Identifies colors in RGB and
CMYK
http://www.inetia.com/eyedropper_eng.php
Sites of Interest
Pediatrics and Color-Blindness (in Spanish)
http://www.tupediatra.com/temas/tema188.htm
Definition and Types of Color-Blindness
- http://www.alemana.cl/not/not/not030212.html (in Spanish)
- http://members.shaw.ca/hidden-talents/vision/color/colorblind1.html
Ways of Seeing Based on Type of
Color-Blindness
http://www.iamcal.com/toys/colors/
Color Tables:
- http://www.visibone.com/
- http://www.websitetips.com/color/
- http://www.toledo-bend.com/colorblind/colortable.html
Am I Color-Blind?
Take this test and
check whether you are color-blind or not.
Test 1-Traditional: http://www.toledo-bend.com/colorblind/Ishihara.html
Test 2- Demonstration Cards: http://colorvisiontesting.com/online%20test.htm#demonstration%20card