1.4.6 Contrast (Enhanced)

Introduction

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

• Does text on top of images have enhanced contrast?

This check is related to the

1.4.6 Contrast (Enhanced)

Introduction

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

• Does text on top of images have enhanced contrast?

This check is related to the

What

This check ensures that any text that appears over a background image, gradient, or filter maintains a strong contrast ratio of at least 7:1 against its background. Enhanced contrast makes content significantly easier for individuals with low vision or color blindness to read and represents a higher standard of accessibility.

Why

People with visual impairments, such as low vision or color blindness, often struggle to distinguish text from complex backgrounds like images or gradients if the contrast is insufficient. High contrast ensures that the information remains legible even when environmental factors, such as glare on a screen or low-light conditions, affect visibility.

Who

Affected users

This check affects individuals with:

• Low vision: Who struggle to distinguish text from complex backgrounds. This category includes users with natural age-related vision loss.
• Color blindness: Who have a better ability to distinguish text when there is good contrast.
• No impairments: All users benefit from good contrast when they content under special lighting conditions, such as in bright sunlight or on a screen that is dimmed due to low battery mode.

Examples

Pass example 

A compliant design uses a dark overlay or a solid background color behind white text to ensure that the contrast ratio exceeds 7:1.

HTML

<div style="background-image: url('mountain.jpg'); background-color: black;">
  <p style="color: white; padding: 10px; background: rgba(0,0,0,0.8);">This text is easy to read because of the high contrast overlay.</p>
</div>

Fail example 

Text placed directly over a busy or light-colored image with no overlay often fails to meet the 7:1 ratio, which makes the words blend into the background.

HTML

<div style="background-image: url('bright-clouds.jpg');">
  <p style="color: white;">This text is difficult to see against the light background.</p>
</div>

How

This section provides instructions on how to review and fix this issue.

How to review it

Identify any text that is positioned over an image, gradient, or decorative filter. You can use the Web Governance Browser Extension to identify the specific element on the page or locate it within the HTML source code. Use a color contrast analyzer to measure the ratio between the text color and the most challenging part of the background image.

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

How to fix it

If the contrast is below 7:1, follow the instructions below to apply one of the fixes:

• Apply a semi-transparent solid background color (overlay) behind the link text to create a uniform contrast area.
• Apply a text shadow or glow effect to the font to separate it from the varying colors of the background image.
• Replace the background image with one that is significantly darker or lighter to create a natural contrast with the text color.
• Provide a toggle that allows users to switch to a high-contrast mode where images are removed or replaced with solid colors.

Additional resources

WCAG success criteria

1.4.6 Contrast (Enhanced)