How to deal with low contrast in digital Accessibility

One of the most common mistakes in digital accessibility is lack of sufficient contrast. This post is about how to deal with this problem.

Article Content

Backgrounds on contrasts

It is particularly important for visually impaired and elderly persons that text and UI elements have sufficient contrast. Otherwise they have problems recognizing the elements or reading the text.

In the body of rules, WCAG 2.1 AA, there are two guidelines that affect contrast. Success Criterion 1.4.3 Contrast Minimum specifies a contrast of 4.5:1 for normal text. Normal text is defined as text smaller than 18 pt (24 pixels) or 14 pt (18.5 pixels) that is bold. If text is larger than these values, it should have a minimum contrast of 3:1. For graphical controls that do not contain text, the minimum contrast should be 3:1 (Success Criterion 1.4.11 Non-text Contrast).

The contrast is the relationship between foreground and background color: The right value is always 1, the higher the left value, the higher the contrast. There are quite a number of calculators on the Internet to determine the contrast.

Contrast requirements must be met for all content and UI elements. Excluded are logos, pure design elements and inactive UI elements. Information graphics are often forgotten, they too have to meet the minimum contrasts. Even if you use third-party functionalities such as cookie solutions or media players, they must meet the Contrast requirements.

Dealing with contrasts

It is best when the color palette is designed from the outset in such a way that the contrasts meet the requirements. However, there are cases where it is more difficult to meet the minimum contrasts. This is especially true if the corporate design (CD) is based on unsuitable colors.

If the values deviate only slightly, it may be enough to slightly adjust the colors. Small differences are often only noticeable in a direct comparison. Incidentally, the contrast values must not be rounded up: 4.5:1 is passed, 4.49:1 not. It may also be possible to agree on an exception from the CD for the affected component. The CD can let off steam in the logo and decorative elements, there are no minimum contrasts.

Another possibility is to change the text size or the boldface or both. For example, if the text is 19 pixels in size, it could be made bold and would then have to meet the value of 3:1. If the text is 22 pixels, you could enlarge it to 24 pixels, it shouldn't affect the layout much.

If that's not possible or desired, things get more complicated. It may be a good idea to offer a special version of the application with a higher contrast. Dark mode is not suitable for this purpose, as it could cause other problems for the visually impaired, for example. The contrasts are also not automatically sufficient in dark mode. With websites, however, thanks to CSS it is no problem to offer customized versions.

If you offer a so-called alternative version, it must meet some requirements:

  • The function to activate the alternative version must itself meet the WCAG.
  • It must be easy to find, for example at the top right of every page or screen.
  • Once activated, it should be retained throughout the entire site, i.e. also when calling up a new subpage or a new screen in an app.

Another common problem are background images or different colored areas with text or UI elements on them. With background images, it is not possible to always maintain the contrast when these images are replaced because images always have different bright areas.

Text and UI elements should either not be placed on them or they should in turn be given a background that ensures that the contrast remains the same even if the background images are changed.

Another common problem is transparent elements. An example of this are multimedia players whose control elements are placed on a semi-transparent background, where parts of the video can be seen. The same applies here as for background images. For example, if the control elements are white and the video contains bright elements at this point, the contrast is usually no longer sufficient. The recommendation would be not to work with transparent backgrounds at this point.

Aren't alternative versions forbidden

Alternate versions should generally be treated as an exception and should not be viewed as a permanent solution. Ultimately, they increase the amount of work and the susceptibility to incorrect representations. Also, the acceptance of alternative versions may not be as high as one would like as a provider. In the medium term it makes more sense to adjust the colors for the component or the CD in such a way that the contrasts are generally fulfilled. Actually, according to the WCAG, alternative versions should only be used if functionalities cannot be made accessible with current technology.

Alternative versions rightfully have a bad one Reputation. Older persons remember the less useful text versions from the 90's. This is definitely true for specially programmed versions of websites. Today, however, it is possible to build content- and function-equivalent websites with CSS media quieries. In our case, a style switcher would only affect the layout like a dark mode. The content still comes from the same database, the functionalities from HTML and JavaScript. From my point of view and that of the Web Accessibility Initiative the CD is not a sufficient reason for an alternative version of the website. As stated above it is a temporary solution until the CD is adjusted. Such alternative versions should certainly not be used as an excuse for other deficiencies in accessibility.

Read more