Summary

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

Techniques

Examples

Example 1 — Setting default foreground and background text

The following example creates a contrast of 19.2:1.

CSS

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

Demo

Call me Ishmael, Dummy.

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:

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.

References