F24: Failure of Success Criterion 1.4.3 and 1.4.6 due to specifying foreground colors without specifying background colors or vice versa

Users with vision loss or cognitive challenges often require specific foreground and background color combinations. For instance, many people with low vision find it much easier to see a Web page that has white text on a black background, so they may have set their user agent to create this contrast. If the author specifies that the text must be black, then it may override the settings of the user agent and render a page that has black text (specified by the author) on black background (that was set in the user agent). This principle also works in reverse. If the Webmaster forces the background to be white, then the white background specified by the author would be the same color as the white text (which was set in the user agent) rendering the page unusable to the user. Therefore, if the author specifies a foreground text color then they should also specify a background color which has sufficient contrast (link) with the foreground and vice versa.

Note: All states of the text should be included. For example, text, link text, visited link text etc.

Examples

Failure Example 1: Specifying only background color with bgcolor in HTML

In the example below the background color is defined on the body element, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

Failure Example 2: Specifying only foreground color with color in HTML

In the example below the foreground color is defined on the body element, however the background color is not defined. Therefore, the example fails the Success Criterion.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>

Failure Example 3: Specifying only background color with CSS

In the example below the background color is defined on the CSS stylesheet, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Failure Example 4: Specifying only background color with CSS

In the example below the foreground color is defined on the CSS stylesheet, however the background color is not defined. Therefore, the example fails the Success Criterion.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

Failure Example 5: Specifying foreground color of link text with CSS

In the example below the link text (foreground) color is defined on the body element. However, the background color is not defined. Therefore, the example fails the Success Criterion.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Assigning property values, Cascading, and Inheritance

Related Techniques

(none currently listed)

Tests

Procedure

Examine the code of the Web page.
Check to see if a foreground color is specified
Check to see if a background color is specified

Note 1: Color and background color may be specified at any level in the cascade of preceding selectors, by external stylesheets or through inheritance rules.

Note 2: Background color may also be specified using a background image with the CSS property 'background-image' or with the CSS property 'background' (with the URL of the image, e.g. 'background: url("images/bg.gif")'). With background images, it is still necessary to specify a background color, because users may have images turned off in their browser. But the background image and the background color need to be checked.

Expected Results

If step #2 is true but step #3 is false, OR if step #3 is true but step #2 is false then this failure condition applies and content fails these Success Criteria.