Digital Accessibility Knowledge Base

text-contrast-on-compound-background

There must be sufficient color contrast between text elements and the background

Who might be affected
Color Blind
Low Vision

Description

Text is an essential and significant element of any web page and application. Sometimes designers choose to place texts (usually titles) above images or video. In some cases, especially when the image contains many details, the text or parts of it are not readable because the contrast between the text and the background or parts of it is insufficient.

Read more about color contrast in general on the color-contrast entry.

Quick Fixes

  1. If possible replace the background to one that will provide a better contrast.
  2. Dim the background by using a semi transparent element over it.
  3. Dim the background by using CSS blending modes that will lighten or darken the background according to the text color.
  4. Values to lighten the background: lighten, screen, color-dodge
  5. Values to darken the background: darken, multiply, color-burn

How Users Are Affected

Text may be hard to read or not readable at all for most users.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.4.3 Contrast (Minimum) (AA)