This check ensures that when link text is over an image, background gradient, or backdrop filter, it remains in sufficient contrast with the background.
What
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, such as navigation menus, banners, and hero sections.
Links over gradients, such as call-to-action buttons or feature sections.
Links over semi-transparent overlays, such as modals and cards with backdrop filters.
Links that use text shadows, shadows must not reduce the effective contrast.
Why
Ensure that links remain visible in all states to improves accessibility for:
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: such as bright sunlight or dark mode.
Websites that fail to meet contrast requirements can make links difficult to identify and access. This creates accessibility barriers.
Examples
This section provides some pass and fail examples.
Link text on top of image, gradient, or backdrop-filter should have minimum contrast
1.4.3 Contrast (Minimum)
Introduction
This check ensures that when link text is over an image, background gradient, or backdrop filter, it remains in sufficient contrast with the background.
What
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, such as navigation menus, banners, and hero sections.
Links over gradients, such as call-to-action buttons or feature sections.
Links over semi-transparent overlays, such as modals and cards with backdrop filters.
Links that use text shadows, shadows must not reduce the effective contrast.
Why
Ensure that links remain visible in all states to improves accessibility for:
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: such as bright sunlight or dark mode.
Websites that fail to meet contrast requirements can make links difficult to identify and access. This creates accessibility barriers.
Examples
This section provides some pass and fail examples.