Links within text blocks must be distinguishable by more than color alone.

Links inside blocks of text must be visually distinguishable from the surrounding non-link text by something other than color alone. When a link's only visual indicator is a color change, users who are color blind or have low vision may not be able to tell that the link exists. This affects roughly 8% of men and 0.5% of women with color vision deficiencies, as well as people viewing screens in bright sunlight or on low quality displays where color differences wash out.

This rule maps to WCAG 2.1 Success Criterion 1.4.1 (Use of Color) at Level A. The criterion states that color must not be the sole visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Because links are interactive elements that perform an action (navigation), relying on color alone to distinguish them from static text fails this requirement.

How to fix it

The simplest fix is to underline links. Browsers do this by default, and removing the underline with text-decoration: none is what usually causes this issue. Restoring the underline is the most widely understood link indicator.

If an underline does not fit the design, there are two paths:

1. Use a non-color visual indicator such as a border-bottom, a background highlight, an icon, font weight change, or any other treatment that does not depend on color perception.
2. If you want to use color alone in the default state, you must meet both of these conditions:
   • The link color has at least a 3:1 contrast ratio against the surrounding text color.
   • An additional non-color indicator (such as an underline) appears on :hover and :focus.

WCAG considers the second approach a sufficient technique (G183), but it is less reliable because users must hover or focus each piece of text to discover whether it is a link. Underlines or other persistent indicators are preferable.

Examples

Link distinguished only by color (fails)

<p>
  Read our <a href="/policy" style="color: #1a73e8; text-decoration: none;">privacy policy</a>
  before signing up.
</p>

The link text "privacy policy" differs from the surrounding paragraph text only by its blue color. A user who cannot perceive that color difference has no way to identify it as a link.

Link with underline (passes)

<p>
  Read our <a href="/policy">privacy policy</a> before signing up.
</p>

The browser's default underline is present. No additional CSS is needed.

Link with underline restored in CSS (passes)

<style>
  .content a {
    color: #1a73e8;
    text-decoration: underline;
  }
</style>

<p class="content">
  Read our <a href="/policy">privacy policy</a> before signing up.
</p>

Link with a non-color indicator other than underline (passes)

<style>
  .content a {
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 2px solid #1a73e8;
  }
</style>

<p class="content">
  Read our <a href="/policy">privacy policy</a> before signing up.
</p>

The bottom border acts as a visible, non-color cue.

Color-only link with 3:1 contrast and hover/focus indicator (passes conditionally)

<style>
  .content a {
    color: #1a73e8; /* must have >= 3:1 contrast against surrounding text color */
    text-decoration: none;
  }
  .content a:hover,
  .content a:focus {
    text-decoration: underline;
  }
</style>

<p class="content">
  Read our <a href="/policy">privacy policy</a> before signing up.
</p>

This approach meets WCAG 1.4.1 only when the link color has at least a 3:1 contrast ratio against the surrounding text and the hover/focus state adds a non-color indicator. For example, if the body text is #333333 and the link color is #1a73e8, verify the contrast between those two colors (not against the background) using a contrast checker. If the ratio falls below 3:1, this technique is insufficient.

How to check contrast between link and body text

Standard contrast checkers compare foreground text to a background color. For this rule, you need to compare the link text color to the surrounding body text color. Tools such as the WebAIM Contrast Checker work for this: enter the link color as the foreground and the body text color as the background (or vice versa) to get the ratio. The result must be 3:1 or higher.

When in doubt, add an underline. It is the most reliable, universally understood indicator of a link, and it removes any ambiguity for all users.

Learn more:

W3C Reference

Understanding Success Criterion 1.4.1: Use of Color

→

W3C Reference

Technique G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

→