Back to Learn
Pulseaccessibility

Links Are Distinguishable Without Color

Ensure links within text blocks are identifiable by more than color alone.

What This Audit Checks

This audit verifies that links inside blocks of text are visually distinguishable from surrounding non-link text by something other than color alone. The link must either have a non-color indicator (such as an underline) or meet a 3:1 contrast ratio against the surrounding text while also providing a non-color indicator on hover and focus.

Why It Matters

Users with color vision deficiencies cannot rely on color differences to identify links. If a link looks identical to body text except for hue, those users will not know it is interactive.

How to Fix It

  • Add an underline to links. This is the simplest and most universally understood approach.
  • Use text-decoration: underline on all inline links by default. If you remove it for stylistic reasons, provide an alternative like a border-bottom or distinct font weight.
  • Ensure 3:1 contrast between link text and surrounding text if you rely on a non-underline approach. The link must still show a non-color indicator on :hover and :focus.
/* Good: underline makes links obvious */
p a {
  text-decoration: underline;
}

/* Acceptable: visible on hover/focus, 3:1 contrast with body text */
p a {
  text-decoration: none;
  font-weight: 600;
}
p a:hover,
p a:focus {
  text-decoration: underline;
}

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources