Web Governance
Links inside text are sufficiently distinguishable
1.4.1 Use of Color
This document gives information about the related accessibility checks:
Links inside text are sufficiently distinguishable
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 can see colors. 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 Visual impairments: Who cannot distinguish between colors.
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 gives some examples of the issue.
In the example, you can see 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.
In the example, gray links surrounded by black text have been underlined, making it visually clear that they are links, even without color vision.
The Web Governance platform will highlight links that are visually distinguished from the surrounding text solely by their color.
To fix the problem, you need to adjust the visual styling of the links so they have additional visual characteristics beyond just color. For example, you could add underlining. This usually requires editing the CSS styles for your 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