IT Accessibility Curriculum and Resources

Standard 2:
Use of Color to Convey 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, http://joeclark.org/book/sashay/serialization/.)

    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 cancelled. 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 http://www.lighthouse.org/color_contrast.htm

    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.

    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>

Back to NYS Standards Discussion HOME