Web Governance
Link inside text is difficult to see or identify
1.4.1 Use of Color
This document provides information about the Acquia Web Governance accessibility check:
Link inside text is difficult to see or identify.
Color should not be the only way to distinguish links from surrounding text. There should also be additional visual markers, such as underlining or icons, to make it clear that the text is a link.
Not everyone sees colors in the same way. Some users may have difficulty distinguishing between certain color combinations, while others with monochromatic vision can only see in shades of gray. If color is the only way to differentiate links from surrounding text, users with color blindness won’t be able to tell which text is a link and which is regular text.
This check affects the following users who have:
Priya Patel is a 29-year-old urban planner of South Asian descent, living in Mumbai. With monochromatic vision, Priya experiences the world in various shades of gray, with no color differentiation.
“Alright, so here’s the thing—sometimes I feel like I am on a never-ending scavenger hunt when I am using websites. Take for example, when I was trying to navigate a popular project management tool the other day. All the links were color-coded, but since my world is basically fifty shades of gray, I might as well have been looking for a needle in a haystack. I was clicking on everything, hoping something would work, but it felt like I was just guessing. It’s like I’m playing a game where everyone else has the rules, and I’m just trying to keep up. If they added some icons or underlining, it would make a huge difference for people like me!”
This section provides some examples of the issue.
The example below shows excerpts from a website where links are colored gray and the surrounding text is black. There is no other visual indication, aside from the color, to show what is a link. Both a color version and a black-and-white version are provided to highlight that links are not distinguishable from the surrounding text when color differences are not visible.
The example below shows underlined gray links surrounded by black text. This makes it visually clear that they are links, even without color vision.
This section provides information on how to identify and fix the issue.
The Acquia Web Governance platform highlights links that are visually distinguished from the surrounding text solely by their color.
To fix the problem, adjust the visual styling of the links so that they have additional visual characteristics beyond color. For example, add underlining. This usually requires an edit to the CSS styles for links.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance