Summary

Ensure sufficient contrast when setting background colors and images through CSS.

Techniques

• Ensure minimum contrast between foreground text and background. [[WCAG-1.4.3]]

• Consider enhanced contrast between foreground text and background. [[WCAG-1.4.6]]

Examples

body {
   color: rgb(0,0,0);
   background-color: rgb(251,245,224);
}

Explanation

Contrast, as it relates to accessible reading, is the difference in luminance (amount of light emitted) between the foreground text and the background behind it. By taking the relative luminance of each, a contrast ratio between 1:1 (no contrast) and 21:1 (darkest black on whitest white) can be determined.

Ensuring sufficient contrast between the foreground text and background colors and images is necessary to ensure that users with low vision and color deficiencies can read the publication.

The minimum contrast to meet WCAG level AA guidelines is 4.5:1, but this drops to 3:1 for text that is at least 18 point in size by default (or 14 point when bolded). The contrast requirement does not apply to logos (e.g., for the publisher or imprint) or text that is included in decorative images.

To meet WCAG AAA, the minimum contrast requirement increases to 7:1 and the large test requirement to 4.5:1. While it is not required to meet this contrast level, the better the contrast that can be achieved the greater the audience that will be able to read the publication.

Avoid overlaying text on noisy (multi-color) background images, and relying on positioning to avoid color contrasts, as different reading system may reflow content in unexpected ways.

Calculating the contrast ratio is mostly easily and accurately done by machine and there are a number of free applications available, including:

• Ace — The Ace validator checks EPUB publications for various WCAG violations including contrast issues. Ace is the only tool that checks entire publications.
• Lighthouse — Lighthouse is a developer tool built into Chromium-based browsers such as Chrome and Edge. It checks individual HTML pages for accessibility problems including contrast issues.
• Color Contrast Analyzer (CCA) — CCA is a helpful tool that tests the contrast ratio between manually input colors. It can quicken the process of solving contrast issues as an entire publication does not need to be rechecked to determine if a new combination is compliant.

Although these tools are useful at comparing CSS color declarations for problems, they typically are not able to check for problems with text overlaying background images (or images with text). It is generally advised not to use background images in reflowable publications as support is often poor, but text on images is very common in fixed layout publications.

When text is placed over an image, or is part of an image, manual verification of the contrast is necessary.

Related Links

• CSS — Foreground color: the 'color' property
• CSS — The background