---
title: "Link inside text is difficult to see or identify"
date: "2024-10-25T12:46:58+00:00"
summary:
image:
type: "page"
url: "/web-governance/link-inside-text-difficult-see-or-identify"
id: "b450d529-1fb2-4d42-ab1a-3e62e168e0a1"
---

Table of contents will be added

1.4.1 Use of Color

Introduction
------------

This document provides information about the Acquia Web Governance accessibility check:

*   Link inside text is difficult to see or identify.
    

What
----

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.

Why
---

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.

Who
---

### Affected users

This check affects the following users who have:

*   Visual impairments: Who cannot distinguish between colors.

### User story

![A young woman with long hair in a flowered dress standing outside.](https://acquia.widen.net/content/2g901kjz7l/web/Mon_AccessibilityHelpCenter-UserStory-WomanStandingOutside.png?v=3606c14d-8b08-4bd3-88f2-7ef30001de7c)

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!”_

Examples
--------

This section provides some examples of the issue.

### Example: Colored links

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.

![Two versions of a website membership invitation where the link "Sign up for Membership" is dark gray and the surrounding text is black.](https://acquia.widen.net/content/i9njcafo6l/web/Mon_AccessibilityHelpCenter-Example-LinksIndistinguishable.png?v=5bdd246b-e29c-4617-b93b-a5f18b52166e)

### Example: Underlined links

The example below shows underlined gray links surrounded by black text. This makes it visually clear that they are links, even without color vision.

![Two versions of a website membership invitation where the link "Sign up for Membership" is dark gray and underlined and the surrounding text is black.](https://acquia.widen.net/content/dajyodyc4o/web/Mon_AccessibilityHelpCenter-Example-LinksUnderlined.png?v=a754f98c-d6c2-487b-97a1-7014c645005c)

How
---

This section provides information on how to identify and fix the issue.

### How to identify it

The Acquia Web Governance platform highlights links that are visually distinguished from the surrounding text solely by their color.

### How to fix it

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.

Additional resources
--------------------

### WCAG Success Criteria

[1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)