This document provides information about the Acquia Web Governance accessibility check:
Does text over background image meet minimum contrast requirements?
What
This check ensures that any text placed on top of a background image is easy to read and stands out clearly. To meet accessibility standards, the visual presentation of text over an image must maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Why
Low contrast between text and background can make content inaccessible to many users.
Who
This check affects individuals with
Low vision or color blindness: Who struggle to differentiate text from the background pattern or colors.
Users with cognitive disabilities or attention disorders: Who may find it difficult to focus on and process information when visual clarity is poor.
No impairments: Who need high contrast to see the content clearly in high-glare environments or when they use low-quality screens.
Examples
Pass example
A compliant design uses a dark semi-transparent overlay between a light-colored text and a busy background image to ensure the contrast ratio remains above 4.5:1.
HTML
<div style="background-image: url('forest.jpg');">
<div style="background-color: rgba(0, 0, 0, 0.7); color: white;">
<p>This text is easy to read due to the dark overlay.</p>
</div>
</div>
Why this is correct: The overlay creates a consistent, high-contrast background for the text regardless of the image details behind it.
Fail example
White text is placed directly over a background image that contains light-colored clouds or bright areas, which makes parts of the words disappear.
HTML
<div style="background-image: url('bright-sky.jpg'); color: white;">
<p>This text is difficult to read over light clouds.</p>
</div>
Issue: The lack of sufficient contrast between the white text and the bright parts of the image makes the content unreadable for many users.
How
This section provides instructions on how to review and fix the issue.
How to review it
Identify any text that appears over an image on the page. 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, assess the contrast with the following steps:
Use a contrast analyzer tool to measure the ratio between the text color and the various colors in the background image.
Check if the contrast ratio is at least 4.5:1 for normal text or 3:1 for large text across the entire area where the text is located. If the image has significant color variation that causes the contrast to fall below these levels in certain areas, the check fails.
How to fix it
If the contrast is insufficient, use one of the following methods to ensure the text is accessible:
Apply a solid or semi-transparent background color to the text container to provide a consistent background. Add a text-shadow or outline to the letters to help them stand out from the background colors.
Adjust the brightness or darkness of the background image itself to increase the contrast with the text color.
Move the text to a solid-colored area outside of the image.
Does text over background image meet minimum contrast requirements?
1.4.3 Contrast (Minimum)
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Does text over background image meet minimum contrast requirements?
What
This check ensures that any text placed on top of a background image is easy to read and stands out clearly. To meet accessibility standards, the visual presentation of text over an image must maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Why
Low contrast between text and background can make content inaccessible to many users.
Who
This check affects individuals with
Low vision or color blindness: Who struggle to differentiate text from the background pattern or colors.
Users with cognitive disabilities or attention disorders: Who may find it difficult to focus on and process information when visual clarity is poor.
No impairments: Who need high contrast to see the content clearly in high-glare environments or when they use low-quality screens.
Examples
Pass example
A compliant design uses a dark semi-transparent overlay between a light-colored text and a busy background image to ensure the contrast ratio remains above 4.5:1.
HTML
<div style="background-image: url('forest.jpg');">
<div style="background-color: rgba(0, 0, 0, 0.7); color: white;">
<p>This text is easy to read due to the dark overlay.</p>
</div>
</div>
Why this is correct: The overlay creates a consistent, high-contrast background for the text regardless of the image details behind it.
Fail example
White text is placed directly over a background image that contains light-colored clouds or bright areas, which makes parts of the words disappear.
HTML
<div style="background-image: url('bright-sky.jpg'); color: white;">
<p>This text is difficult to read over light clouds.</p>
</div>
Issue: The lack of sufficient contrast between the white text and the bright parts of the image makes the content unreadable for many users.
How
This section provides instructions on how to review and fix the issue.
How to review it
Identify any text that appears over an image on the page. 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, assess the contrast with the following steps:
Use a contrast analyzer tool to measure the ratio between the text color and the various colors in the background image.
Check if the contrast ratio is at least 4.5:1 for normal text or 3:1 for large text across the entire area where the text is located. If the image has significant color variation that causes the contrast to fall below these levels in certain areas, the check fails.
How to fix it
If the contrast is insufficient, use one of the following methods to ensure the text is accessible:
Apply a solid or semi-transparent background color to the text container to provide a consistent background. Add a text-shadow or outline to the letters to help them stand out from the background colors.
Adjust the brightness or darkness of the background image itself to increase the contrast with the text color.
Move the text to a solid-colored area outside of the image.
Web Governance