This document provides information about the Acquia Web Governance accessibility check:
Do links on top of images have minimum contrast?
What
This check ensures that when link text is over an image, background gradient, or backdrop filter, it remains in sufficient contrast with the background.
When link text is placed over a background image, gradient, or backdrop filter, it must maintain a minimum contrast ratio of 4.5:1 with the background across all link states, including:
Default (unvisited)
Hovered
Focused
Visited
For large-scale text (18pt or larger, or 14pt and bold), the minimum contrast ratio is 3:1.
Elements that require contrast validation include:
Links over images: Including navigation menus, banners, and hero sections.
Links over gradients: Including call-to-action buttons or feature sections.
Links over semi-transparent overlays: Including modals and cards with backdrop filters.
Links that use text shadows: Including shadows which can reduce the effective contrast.
Why
Websites that fail to meet contrast requirements make links difficult to identify and access. This creates accessibility barriers. Links that remain visible in all states improve site accessibility.
Who
Affected users
Users with low vision: Who rely on high contrast to identify interactive elements.
Users with color blindness: Who may struggle to differentiate link colors from the background.
Keyboard and screen reader users: Who rely on visual indicators such as focus outlines and hover changes.
All users in different viewing conditions: Who find it hard to see links on websites when in bright sunlight or when their device is in dark mode.
Examples
This section provides some pass and fail examples.
Issue: When users hover the cursor over the link, it becomes hard to see.
How
This section provides information on how to identify and fix the issue.
How to identify it
The Acquia Web Governance platform highlights elements that contain text with insufficient contrast levels, including standard text on the website as well as link text in various states.
Identify the links that are positioned over images, gradients, or filters.
Check the contrast with a contrast checker tool.
Test the contrast in all link states: default, hover, focus, and visited.
Ensure that text shadows do not reduce the contrast.
Test in different lighting conditions such as bright and dark environments.
How to fix it
This section provides instructions on how to fix this issue.
This document provides information about the Acquia Web Governance accessibility check:
Do links on top of images have minimum contrast?
What
This check ensures that when link text is over an image, background gradient, or backdrop filter, it remains in sufficient contrast with the background.
When link text is placed over a background image, gradient, or backdrop filter, it must maintain a minimum contrast ratio of 4.5:1 with the background across all link states, including:
Default (unvisited)
Hovered
Focused
Visited
For large-scale text (18pt or larger, or 14pt and bold), the minimum contrast ratio is 3:1.
Elements that require contrast validation include:
Links over images: Including navigation menus, banners, and hero sections.
Links over gradients: Including call-to-action buttons or feature sections.
Links over semi-transparent overlays: Including modals and cards with backdrop filters.
Links that use text shadows: Including shadows which can reduce the effective contrast.
Why
Websites that fail to meet contrast requirements make links difficult to identify and access. This creates accessibility barriers. Links that remain visible in all states improve site accessibility.
Who
Affected users
Users with low vision: Who rely on high contrast to identify interactive elements.
Users with color blindness: Who may struggle to differentiate link colors from the background.
Keyboard and screen reader users: Who rely on visual indicators such as focus outlines and hover changes.
All users in different viewing conditions: Who find it hard to see links on websites when in bright sunlight or when their device is in dark mode.
Examples
This section provides some pass and fail examples.
Issue: When users hover the cursor over the link, it becomes hard to see.
How
This section provides information on how to identify and fix the issue.
How to identify it
The Acquia Web Governance platform highlights elements that contain text with insufficient contrast levels, including standard text on the website as well as link text in various states.
Identify the links that are positioned over images, gradients, or filters.
Check the contrast with a contrast checker tool.
Test the contrast in all link states: default, hover, focus, and visited.
Ensure that text shadows do not reduce the contrast.
Test in different lighting conditions such as bright and dark environments.
How to fix it
This section provides instructions on how to fix this issue.