Technique F83:Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

Applicability

Any technology

This technique relates to:

Description

This failure occurs when people with low vision are not able to read text that is displayed over a background image. When there is not sufficient contrast between the background image and the text, features of the background image can be confused with the text making it difficult to accurately read the text.

To satisfy Success Criterion 1.4.3 and 1.4.6, there must be sufficient contrast between the text and its background. For pictures, this means that there would need to be sufficient contrast between the text and those parts of the image that are most like the text and behind the text.

Examples

Example 1: Failure Example 1

Black text overlays an image with black lines. The lines cross behind the letters making F's look like E's etc.

Example 2: Failure Example 2

Black text overlays an image with dark gray areas. Wherever the text crosses a dark gray area the contrast is so bad that the text cannot be read.

Tests

Procedure

  1. Quickcheck: First do a quick check to see if the contrast between the text and the area of the image that is darkest (for dark text) or lightest (for light text) meets or exceeds that required by the Success Criterion (1.4.3 or 1.4.5). If the contrast meets or exceeds the specified contrast, then there is no failure.
  2. If the Quickcheck is false, then check to see if the background behind each letter has sufficient contrast with the letter.

Expected Results

  • If Quickcheck is false and #2 is false as well then this failure condition applies and the content fails the contrast Success Criterion.