Color Blindness

What is Color Blindness?

One of the most basic design principles is "design in black and white". Color should then be used for emphasis when the design is complete but never used as a visual clue to draw action. Color perception problems cause people to perceive images and logos in very different manners. People with color blindness general have no problem seeing things, they just can differentiate between some shades of red and green. Sometimes making it very difficult for users to distinguish important features of a web site. For more information on this topic visit the American Optometric Association.

As many as one male in twelve may be affected to some degree; the number is much less for females, but definitely not zero (one estimate is around 0.4%) (Wilson, Dianne. 1998). For more information on how a vision and color visit Color Vision, Color Deficiency.

Section 508, paragraph c in Subpart B - Technical Standards: Sec. 1194.22 states "Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup." There are a few simple techniques to keep in mind when designing and building websites that accommodate these guidelines.

Challenges/Barriers on the Internet

In general, people with color blindness are able to use the Internet to access information, entertainment, and other sources without a problem. One example of how a web site might present a challenge to a person with color blindness is in the use of colored text. On most sites color is used to distinguish between visited links and unvisited links. The link often appears blue until the user clicks on it. It then turns to a different color after the user views that section.

Another example is a user doing online shopping. Most sites use red text to display sale prices or total prices to users. This would create a problem for someone with color blindness that makes would make the site less friendly. If the user is not able to override the style sheets on the site, they might select another site to conduct their shopping on. Visit Giant Foods and view the site, then go to Visicheck, enter the URL and take a look at the differences. The site is still useable to someone with color blindness but harder to navigate, locate prices and finally much less attractive.

Solutions/Guidelines

1. Do not rely on color alone to differentiate items on a web site. See an Example of the differences that clear text can make.
2. Ensure there is a contrast between foreground and background colors. One way to achieve this is to use CSS (Cascading Style Sheets). Using CSS sheets allows standards and formatting related code to be referenced in a single place. When updates or changes have to be made to stylistic elements, it is much easier. When using style sheets, follow these guidelines:
   • 'color', for foreground text color.
   • background-color', for background colors.
   • border-color', 'outline-color' for border colors.
   • For link colors, refer to the :link, :visited, and :active pseudo-classes.
3. Use text based navigation aids whenever possible.
4. Allow users to override style sheets to display personal browser settings. UAAG 1.0 Checkpoint 3.3 and 3.4 (User Agent Accessibility Guidelines from W3C). For more information visit the suggestions for Guideline 3 on the W3C website.

Designing and building a website with these guidelines in mind with improve the overall efficiency and structure of the website for all users.

Resources

They are many tools available on the Internet to help ensure that a website is designed with color perception in mind.

• "Daltonizing"- A process that is part of the Visicheck Solution. This tool is a digital image processing technique that can make print or video display more salient to color blind people without distorting the color balance to an unacceptable degree. This site allows you to run an upload an image to the site and it will readjust the color (red, yellow, green) saturation on the image to increase the contrast which allows people will color blindness to more clearly perceive variations in the image even if they can't see the actual color.
• Safe Web Colours for colour-deficient vision - This site contains information and design tools that help authors understand which colors are easily confused and how to ensure that important color cues are not lost.
• The Color Laboratory - Project at the AWARE Center that allows designers to select colors and see how they appear next to one another, and in various foreground/background combinations under simulated color blindness scenarios.
• Making a Web Site Accessible - Links to the W3C Guidelines on color blindness.
• Section 508 Government guidelines