<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: Ensure sufficient contrast between foreground and background colors</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">Ensure sufficient contrast between foreground and background colors</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">WAI / WCAG 1.0 Priority 2 checkpoint 2.2</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  
                  <p>
                     The page contains images, objects or applets. There might be cases where the contrast
                     between foreground and background colors is not sufficient to differentiate them.
                     
                     
                  </p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to check</b>
                  
                  
                  <p>
                     Check that colors and colored items in the page can be clearly
                     differentiated in all the possible contexts in which website visitors may be
                     using the page.
                     <br>
                     Make sure that the contrast between foreground and background items is
                     conveyed by other means in addition to colors, such as levels of
                     luminosity (i.e. black and white contrast), different font styles,
                     font sizes, or font faces.
                     
                  </p>
                  
                  
                  <p>
                     If color is used, consider exaggerating the differences
                     between foreground and background colors by making colors differ in
                     all the following three parameters:
                     
                  </p>
                  
                  
                  <ul>
                     
                     
                     <li>
                        <strong>hue</strong>
                        
                     </li>
                     
                     
                     <li>
                        <strong>saturation</strong>
                        
                     </li>
                     
                     
                     <li>
                        <strong>brightness</strong>
                        
                     </li>
                     
                     
                  </ul>
                  
                  
                  <p>
                     Easy ways to test the page are:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li> view the page on a black and white screen and go through each
                        of its elements;
                     </li>
                     
                     <li> print the page on a black and white printer;</li>
                     
                     <li> take the printout and copy it two or three times
                        to see how it degrades. This will demonstrate where it is necessary to
                        add redundant cues (like underlying links)
                        or whether the cues are too small or
                        indistinct to hold up well.
                     </li>
                     
                  </ul>
                  
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  <p>
                     There are many situations where a poor choice of color hinders
                     perception and comprehension of some information item or image in a
                     page.
                     
                  </p>
                  
                  <p>
                     This may depend on many factors including:
                     
                  </p>
                  
                  <ul>
                     
                     <li> poor choice of background/foreground colors;</li>
                     
                     <li> the website visitor  uses a screen incapable of rendering colors
                        with the same quality as the one used by the page designer;
                     </li>
                     
                     <li> the visitor is accessing the page via a black and white
                        screen on a PDA or cell phone;
                     </li>
                     
                     <li> the visitor needs to print the page on a black and white printer;</li>
                     
                     <li> the visitor is color-blind.</li>
                     
                  </ul>
                  
                  
                  <p>
                     From the W3C guidelines:
                     
                  </p>
                  
                  
                  <p>
                     <strong>Guideline 2.  Don't rely on color alone.
                        <br>
                        Ensure that text and graphics are understandable when viewed without color.</strong>
                     
                  </p>
                  
                  <p>
                     If color alone is used to convey information, people who cannot
                     differentiate between certain colors and users with devices that have
                     non-color or non-visual displays will not receive the
                     information. When foreground and background colors are too close to
                     the same hue, they may not provide sufficient contrast when viewed
                     using monochrome displays or by people with different types of color
                     deficits.
                     
                  </p>
                  
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>