This document provides information about the related Acquia Web Governance check:
Do links on top of images have enhanced contrast?
What
This check ensures that all links that are positioned over a background image, gradient, or filter maintain a strong contrast ratio of at least 7:1 against their background. The ratio must persist across all link states, including normal, hover, focus, and visited.
Why
It is important to fix this type of issue because high contrast is essential for readability and navigation. People with low vision or color blindness often struggle to perceive text that blends into complex backgrounds like photographs or gradients. Without sufficient contrast, these users can fail to identify a clickable link or read the link text. High contrast also benefits people who use devices in bright sunlight or high-glare environments where screen visibility is reduced.
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 viewing 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 link uses a solid background color behind the text or a dark overlay on the image to ensure the contrast ratio is at least 7:1. For example, white text placed over a dark, semi-transparent black box that is positioned over a light image.
A non-compliant link features light-colored text placed directly over a light or busy part of an image without any supporting background or text shadow. For example, yellow link text placed over a photo of a sunset, where the colors blend and make the text unreadable.
This section provides information on how to review and fix this issue.
How to review it
Identify all links that are positioned over images, gradients, or graphical filters. You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code.
Measure the contrast ratio between the link text and the darkest and lightest parts of the background image with a contrast analyzer tool.
Test the link in different states: hover over it and use the keyboard to focus on it to ensure that the 7:1 ratio is maintained in all views.
This document provides information about the related Acquia Web Governance check:
Do links on top of images have enhanced contrast?
What
This check ensures that all links that are positioned over a background image, gradient, or filter maintain a strong contrast ratio of at least 7:1 against their background. The ratio must persist across all link states, including normal, hover, focus, and visited.
Why
It is important to fix this type of issue because high contrast is essential for readability and navigation. People with low vision or color blindness often struggle to perceive text that blends into complex backgrounds like photographs or gradients. Without sufficient contrast, these users can fail to identify a clickable link or read the link text. High contrast also benefits people who use devices in bright sunlight or high-glare environments where screen visibility is reduced.
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 viewing 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 link uses a solid background color behind the text or a dark overlay on the image to ensure the contrast ratio is at least 7:1. For example, white text placed over a dark, semi-transparent black box that is positioned over a light image.
A non-compliant link features light-colored text placed directly over a light or busy part of an image without any supporting background or text shadow. For example, yellow link text placed over a photo of a sunset, where the colors blend and make the text unreadable.
This section provides information on how to review and fix this issue.
How to review it
Identify all links that are positioned over images, gradients, or graphical filters. You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code.
Measure the contrast ratio between the link text and the darkest and lightest parts of the background image with a contrast analyzer tool.
Test the link in different states: hover over it and use the keyboard to focus on it to ensure that the 7:1 ratio is maintained in all views.
Web Governance