Link in text block

What it is

When a hyperlink appears inside a paragraph or block of text, sighted visitors must be able to tell it apart from the words around it. Browsers traditionally underline links to make this obvious, but many stores remove underlines for aesthetic reasons and rely solely on color to signal "this is a link." WCAG Success Criterion 1.4.1 ("Use of Color") requires that if color is the *only* visual difference between a link and its surrounding text, that color difference must meet a minimum contrast ratio of 3:1. If any non-color visual cue — such as an underline, bold weight, or border — is always present on the link, the 3:1 contrast rule does not apply, because color is no longer the sole distinguishing factor.

Why it matters

Approximately 8% of men and 0.5% of women have some form of color-vision deficiency, and many more users struggle to distinguish subtle color differences on low-quality screens, in bright sunlight, or with age-related vision changes. If those visitors cannot identify your links, they miss calls-to-action, product links, and navigation cues — directly reducing conversions and revenue. From a legal standpoint, WCAG 2.1 AA is the standard referenced in accessibility legislation in the US (ADA), EU (EAA), and many other jurisdictions; failing this criterion exposes your store to complaints, audits, and litigation. Search engines also use crawlable in-text links for internal-linking signals, so broken discoverability hurts SEO indirectly as well.

How to fix it

1. Identify every place in your theme or stylesheet where link colors are defined (look for CSS selectors like `a`, `a:link`, `a:visited`, `.content a`, `.product-description a`, etc.).
2. Use a color contrast checker (e.g., WebAIM Contrast Checker or the browser DevTools accessibility panel) to measure the contrast ratio between your current link color and the surrounding body text color.
3. Choose one of two compliant approaches: (A) Change the link color so it has at least 3:1 contrast against the body text color AND still meets 4.5:1 contrast against the page background (WCAG 1.4.3), OR (B) Re-enable a non-color visual indicator — most commonly `text-decoration: underline` — so color is no longer the sole distinguishing cue, removing the 3:1 requirement entirely.
4. Update the CSS for all relevant link states (`:link`, `:visited`, `:hover`, `:focus`, `:active`) to ensure the chosen approach is consistently applied.
5. Verify the fix in a browser by inspecting the element, running an automated accessibility scanner (axe DevTools browser extension), and visually testing with a grayscale filter or color-blindness simulator.
6. Test across your main content areas — product descriptions, blog posts, policy pages, and any rich-text blocks — because link styles can be overridden in different sections of the theme.

/* APPROACH A — Change link color to pass 3:1 contrast vs. body text
   AND 4.5:1 vs. the page background */
a, a:link, a:visited {
  color: #0057b8; /* verify this passes against your body text color */
}

/* APPROACH B — Add underline so color is no longer the sole cue
   (removes the 3:1 body-text contrast requirement) */
a, a:link, a:visited {
  text-decoration: underline;
}

/* Always ensure focus/hover states are also distinguishable */
a:hover, a:focus {
  text-decoration: underline;
  outline: 2px solid currentColor; /* helps keyboard users too */
}

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Color contrast & accessibility — MDN