This success criteria is about contrast. This related Optimize check states that website owners must provide sufficient contrast between text and the background when the text is positioned over images, gradient background color, or a backdrop filter.
When text is placed on top of a background image, gradient, or backdrop filter effect, it must have a minimum contrast ratio of 4.5:1. This ensures that the text stands out against varying background colors and textures.
For large-scale text that is 18pt or larger, or 14pt and bold, the contrast ratio must be at least 3:1.
Elements that require contrast validation include:
When text is placed on complex or dynamic backgrounds such as images or gradients, it can become difficult to read. Ensure that sufficient contrast specifications are applied to enhance readability. This benefits:
Failure to meet the contrast requirements can result in poor readability and accessibility barriers.
This section provides some pass and fail examples of this check.
Text with a dark overlay on a background image
<div style="position: relative; width: 100%; height: 300px; background-image: url('image.jpg'); background-size: cover;">
<div style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);"></div>
<p style="color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px;">
High-contrast text
</p>
</div>
rgba(0, 0, 0, 0.5)
ensures that the white text remains readable.Text with a solid background on top of an image
<div style="background-image: url('image.jpg'); padding: 20px;">
<span style="background-color: #000000; color: #FFFFFF; padding: 5px;">
Clear readable text
</span>
</div>
Text over a high-contrast gradient
<p style="color: #FFFFFF; background: linear-gradient(to right, #000000, #333333); padding: 10px;">
Text with sufficient contrast
</p>
Text that is placed directly over a background image without an overlay
<div style="background-image: url('image.jpg'); padding: 20px;">
<p style="color: #FFFFFF;">Hard to read text</p>
</div>
Low-contrast text over a gradient
<p style="color: #CCCCCC; background: linear-gradient(to right, #FFFFFF, #EEEEEE); padding: 10px;">
Low-contrast text
</p>
Text shadow effect without sufficient contrast
<p style="color: #999999; text-shadow: 2px 2px 4px #FFFFFF;">
Blurred text with poor contrast
</p>
This issue affects:
This section provides examples on how to review and fix this issue.
This section provides instructions on how to review the text contrast over backgrounds on your pages. Use the following steps:
Use contrast detection tools to identify the contrast on each element. Some tools that you can use are:
This section provides instructions on how to fix this issue.
Use a semi-transparent overlay
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
This helps the text to stand out and leaves the background visible.
Use a high-contrast text color
.text {
color: #FFFFFF;
background-color: #000000;
padding: 5px;
}
This ensures readability over any background.
Avoid low-opacity text shadows
Instead of:
text-shadow: 2px 2px 4px #FFFFFF;
Use:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
This maintains contrast and does not blur the text.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Mar 26 2025 08:31:49 GMT+0000 (Coordinated Universal Time)