Back to Info and Examples for Accessibility Insights for Web
link-in-text-block
Links must be visually distinguished from surrounding text through styling or contrast.
Why it matters
Links embedded in text are most visible when they have distinct styling or sufficient contrast with the surrounding text.
- Styling can make an embedded link discernable if it changes the shape of the text, for example by adding an underline or border or switching to a different font.
- Contrast can make an embedded link discernable if the link text is sufficiently darker or lighter than surrounding text.
An embedded link with no styling and insufficient contrast can be difficult to discern, especially for people with low vision or limited color vision.
How to fix
Implement one or both of the following:
Good
- Adjust the color of the link text and/or the surrounding text to provide a contrast ratio of at least 3:1.
Better
- Provide a distinct style for the link text, such as an underline, a border, or a different font.
Example
Fail
text-decoration attribute to none. Because of these styling choices, some people will have difficulty seeing the embedded links.<style>
p {color: #000000}
a:link {text-decoration: none; color: #0000FF}
...
</style>
Pass
<p> elements. The styling specifies that links in paragraphs will have an underline. Links in other elements, such as tables or lists, are not underlined. Everyone will find it easier to see the embedded links.<style>
p {color: #000000}
p a:link {text-decoration: underline; color: #0000FF}
a:link {text-decoration: none; color: #0000FF}
...
</style>
About this rule
Instances need review if ALL of the following are true:
- Link has no distinct style
- Link's contrast ratio with surrounding tet is less than 3:1