Large text over an image lacks 3:1 contrast ratio

Link to Large text over an image lacks 3:1 contrast ratio copied to clipboard

contrast-text-3-1-over-image

Rule

Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.

Background

People who have low vision or are colorblind may have difficulty reading text if the contrast between the text its background is insufficient. When the contrast ratio between text and its background is adequate, people who have low vision or are colorblind are more likely to be able to read the text.

How to Fix

Fix this issue by adjusting the text and/or background to increase the contrast to at least 3 to 1. Common techniques include:

  1. Applying an opaque or semi-opaque background behind the text.
  2. Lighten or darken part or all of the image to increase the overall contrast between the text and the image.
  3. Use a border around the letters to create sufficient contrast.