Does text on top of images have enhanced contrast?
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 Web Content Accessibility Guidelines (WCAG) success criteria 1.4.6 Contrast Enhanced on this topic.
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.
Does text on top of images have enhanced contrast?
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 Web Content Accessibility Guidelines (WCAG) success criteria 1.4.6 Contrast Enhanced on this topic.
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.
Web Governance