Introduction
Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females. There are two major types of color blindness: those who have difficulty between red and green, and those who have difficulty distinguishing between blue and yellow.
Benefits of Color Friendly Web sites
Aside from making a Web site accessible to visitors who are color blind, there are other benefits to making the site color friendly. These include:
- Accessible Web sites are more likely to be ranked well with the search engines.
- By designing colorblind accessible Web sites, you are also targeting PDAs, 3G phones and similar technological devices used for web access.
- Your Web site is seen as more professional if it doesn’t exclude the impaired or disabled.
Color blindness could involve up to 1 in 20 visitors to your Web site. For this group, you run the risk of having a Web site that the text is barely legible and the images unrecognizable.
The Challenge
The challenge of designing for color blindness is because it is hard to determine what color blind users see and how that is different from what the average user sees.
And the difference between the different types of color blindness just adds an additional layer of complexity.
Research models have attempted to predict or calculate how colors are perceived by color-blind users (Wolfmaier, 1999). These models make a good attempt, but it is not possible to predict what a color blind users sees with 100% accuracy.
Prioritizing the Web site
There are many facets to designing a user-friendly Web site. It is impossible to create a site that is friendly for all and meets the needs of every single visitor. A good strategy is to prioritize the content. The higher the content is in importance means it is more essential to make it color-blind safe.
Any links or buttons on the site that are essential in aiding the user to accomplish their tasks would fall high on the essential list. The standard rule: any content that the user may look at for more than two seconds should be made clearly visible and have a high contrast ratio.
Content areas should be monochromatic with the font color and background at the opposite ends of the color saturation poles (i.e., black text on a white background). Elements of the navigation menus, headers and sub-headers can be given more artistic treatments because users seldom stare at these elements for long periods of time. Navigation should stand out from the content and visitors should be able to quickly differentiate between the two.
Colors that Work the Best
Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.
Each element should have more than one cue. Images, links, buttons, and other similar elements should be enhanced with an image, shape, positioning or text. For example, a link should be highlighted by color as well as underlined. Take away the color treatment and the underline will let visitors with color blindness know that it is a link.
Image maps also pose a problem for color blind users. Image maps have clickable areas that are often delineated by color. Options are to add underlined text to the clickable areas or a black outline around the images (e.g., outline around a state on a map).
It is considered a best practice to use bright colors. People who have color deficiencies can see all the colors but they have a problem differentiating between them so using bright, bold colors helps.
Other issues to consider are the contrast between colors and the background. People with color blindness are less sensitive to colors on either end of the spectrum. For example, reds and blues often appear to be darker to the color blind user.
Why Bother
Some will argue about why sites should be designed with such a small population in mind or to meet the needs of a minority. The are several reasons: 1) a site should always strive to be user-friendly for all audiences 2) there are standards that keep sites accountable to people with disabilities and 3) well-designed sites don’t require changes to make the accessible.
Improving the site for color-blind individuals has an affect on other populations as well. Those with color-blindness are not the only visually impaired users and adding all visually impaired greatly increases this population. The growing senior population often has the same difficulties with visual impairments (e.g., differentiating text and site elements).
References
Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color appearance for dichormats. Journal of the Optical Society of American A, 14, 10. 2647-2655.
Meyer, G.W. & Greenberg, D.P. (1988). Colour defective vision and computer graphics displays. IEEE Computer Graphics and Applications, 8. 5, 28-40.
Wolfmaier, Thomas G. (1999). Designing for the Color-Challenged: A Challenge. Internetworking.
Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.
Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.
Karagol-Ayan, Burcu (2001). Color Vision Confusion. Universal Usability in Practice.
