Use of Color for the Conveyance of Information

From Library

The issue: Approximately 8% of males and .5% of females have some form of color vision deficit (according to www.vischeck.com). The majority of people who have a color deficiency can see color, but they have difficulty distinguishing between certain colors. There are different types of color blindness; problems distinguishing between reds and greens is the most common type.

Additionally, people who are blind often use screen reader software to read web pages. Screen readers do not convey color information when it is used for highlighting or denoting text and are not able to convey information about colors used in graphic images. Therefore, if color alone is used to convey important information, the user may not correctly receive that information. Also, some people may use devices to view the web which do not display colors, such as PDAs or web-enabled cell phones.

For individuals who are color blind, as well as people who have low vision, sufficient contrast between foreground and background is very important for them to accurately see text and other information.

STANDARD 2.1

Information will be conveyed in a manner that is not solely dependent on color as the primary means of informing a user how to interpret information.

 Comments:  Colors and graphics used for solely for artistic reasons do not need to be 
 changed for accessibility reasons. However, if important information is conveyed by 
 color, then that information also needs to be relayed in some other manner. What is 
 meant by important information? Joe Clark states it simply: "If I confuse this item 
 with something else, will I make a mistake? Will I be unable to do what I want?...Only 
 meaningful objects need to be unambiguous." (See Building Accessible Websites by Joe Clark.)

 Therefore, if you are using color to convey important information, it is essential that
 the information also be represented in an alternative manner. This can be done in some
 instances, as demonstrated in the code example below, by adding additional indicators 
 such as an asterisk or by using other style effects such as bolding in the case of text, 
 or texture such as cross-hatching in the case of a graphic. In some cases, additional 
 descriptive information may be required. For example, if you have a color-coded pie 
 chart and the colors are not easily distinguishable when viewed in black and white, 
 you may need to provide a description of the information or data portrayed in the chart. 
 Many people benefit from additional textual descriptions, including those who are blind 
 and people with some types of cognitive disabilities.

 HTML Elements Affected:  N/A. The issue here is more one of presentation than particular elements.

Code Examples:

 Incorrect:
 See a page showing what the code looks like in your user agent (browser).
 Flight Schedule

 The flights listed below in red have been canceled. The flights green are departing on time.

           Delta 1342
           United 320
           American Airlines 787
           Southwest 2390

 Correct:
 See a page showing what the code looks like in your user agent (browser).
 Flight Schedule

 The flights listed below that have been cancelled are indicated with an asterisk (*) 
 and in RED. The flights in green are departing on time.

           Delta 1342*
           United 320
           American Airlines 787*
           Southwest 2390

 Vischeck.com allows you to simulate how your web page would look to people 
 with various types of color blindness.

STANDARD 2.2

Foreground and background colors will provide sufficient contrast.

 Comments:   Lighthouse.org emphasizes that: "Partial sight, aging and congenital color 
 deficits all produce changes in perception that reduce the visual effectiveness of certain 
 color combinations. Two colors that contrast sharply to someone with normal vision may be 
 far less distinguishable to someone with a visual disorder. It is important to appreciate 
 that it is the contrast of colors one against another that makes them more or less discernible 
 rather than the individual colors themselves."

 One way to evaluate your web pages for sufficient contrast is by printing the page 
 on a black and white printer and examining the results for clarity. Another way to check is 
 to use the Vischeck analyzer or the Juicy Studio Color Contrast Analyzer.

 For more information on Effective Color Contrast and designing for people with 
 partial sight and color deficiencies, visit Lighthouse.org.

 Avoid using complex backgrounds which tend to reduce clarity and provide poor contrast.

 If possible, use CSS to define text and background colors, so that users can 
 implement a custom style sheet which better suits their needs. Use numbers rather than 
 names for specifying colors, for example: H1 {color: #FF0033;} rather than H1 {color: red;}.

 W3C recommends using these CSS (style sheet) properties to specify colors:
               * '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

 Ensure that foreground and background colors contrast well. If specifying a 
 foreground color, always specify a background color as well (and vice versa).

 HTML Elements Affected:  N/A. This is a presentational issue, not strictly a coding issue.

Code Examples:

See a page showing what the code looks like in your user agent (browser).

Using Styles to change colors:

To change the text color of one paragraph only:

 <p style="color:#333366; ">The text in this paragraph will appear in a different 
        color from the rest of the page.</p>

To change the background color of a phrase within a paragraph:

 <p>For this example, let's assume that your text color has been set to navy blue in the 
 page's governing style sheet. There's an instructional sentence that you want to set in bold 
 text, and you also want to give that sentence a yellow background so that it will really 
 stand out: <span style="background-color:#FFFF00; color:#cc0000; "><strong>SEND YOUR PAYMENT 
 IN TODAY!</strong></span> The rest of the paragraph will revert to its original format.</p>