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.

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

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.

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.

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