This document is a draft, and is designed to show changes from a previous version. It is presently showing added text, changed text, deleted text, [start]/[end] markers, and Issue Numbers.
Changes are displayed as follows:
All technologies that allow user agents to control foreground and background colors through personal stylesheets or other means.
This failure relates to:
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.
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>
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>
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>
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>
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 are for information purposes only, no endorsement implied.
(none currently listed)
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.
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.