1.4.6 Contrast (Enhanced)

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Does text over background image meet enhanced contrast requirements?

What

This check verifies that any text placed on a background image maintains a high-contrast color combination. Specifically, it checks the contrast ratio between the text and its background image to determine if it meets the enhanced accessibility standard, which is at least 7:1 for normal-sized text and at least 4.5:1 for large text.

Why

Enhanced contrast must be maintained because background images often contain varying colors and textures that can make text difficult to distinguish.

Who

This check affects individuals with

• Low vision: Who find it impossible to read content when the visual separation between the foreground text and the background image is insufficient.
• Color blindness: Who find it impossible to read content when the visual separation between the foreground text and the background image is insufficient.
• Cognitive disabilities: Who find it impossible to read content when the visual separation between the foreground text and the background image is insufficient.
• No impairments: Who view the screen in a bright environment.

Examples

Pass example 

The text is clearly legible because of a high level of contrast against the image. Use a dark overlay on a light image or ensure that the background image is a consistent, solid color behind the text.

HTML

<div style="background-image: url('forest.jpg'); background-color: black;">
  <p style="color: white; padding: 20px;">This text has a 21:1 contrast ratio against the black background overlay.</p>
</div>

Fail example 

White text is placed over a busy or light-colored background image without any text shadow or overlay, which makes it blend into the image. This creates a barrier for users with visual impairments who cannot differentiate the characters from the background details.

HTML

<div style="background-image: url('clouds.jpg');">
  <p style="color: white;">This text is very hard to read against a light sky.</p>
</div>

How

This section provides information about how to review and fix this issue.

How to review it

Identify any elements on the page where text is displayed over an image. You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Once you have identified it, use a contrast analyzer tool to measure the ratio between the text color and the most similar colors in the background image. If the ratio is below 7:1 for normal text or 4.5:1 for large text, the check fails.

For more information, visit How to review an accessibility issue.

How to fix it

Use one of the following methods to fix the issue:

• Apply a semi-transparent or solid background color to the text container to ensure a consistent contrast ratio.
• Use a text-shadow or a darker overlay across the entire background image to make the text pop.
• Increase the weight or size of the text to meet the lower 4.5:1 requirement for large text, though 7:1 remains the preferred target.
• If the image is purely decorative and hinders readability, remove it or move the text to a solid-colored area.

Additional resources

WCAG success criteria

• 1.4.6 Contrast (Enhanced)

Does text over background image meet enhanced contrast requirements?

<div style="background-image: url('forest.jpg'); background-color: black;">
  <p style="color: white; padding: 20px;">This text has a 21:1 contrast ratio against the black background overlay.</p>
</div>

<div style="background-image: url('clouds.jpg');">
  <p style="color: white;">This text is very hard to read against a light sky.</p>
</div>