Description

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.

Related Techniques

Tests

Procedure

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.