How to fix link in text block on WooCommerce

Make inline links visually distinguishable from surrounding body text by ensuring at least 3:1 color contrast between the link color and the non-link text color, or by adding a non-color visual cue (such as underline) to every link.

Steps for WooCommerce

  1. In WordPress admin, go to Appearance → Customize → Additional CSS (for simple overrides) or Appearance → Theme File Editor → style.css for direct theme edits (child theme recommended).
  2. Add or modify a CSS rule targeting inline links, for example: `.entry-content a, .woocommerce-product-details__short-description a { color: #0056b3; text-decoration: underline; }` — replace the color value with one that passes contrast checks.
  3. Alternatively, install a plugin like 'Safe SVG' + 'Custom CSS & JS' or use the built-in Additional CSS panel to scope your fix without touching theme files.
  4. Check WooCommerce product description links specifically by inspecting `.woocommerce-tabs .panel a` and `.product_meta a` selectors.
  5. Save, then verify with the axe browser extension on a product page and a blog post.
Official WooCommerce documentation ↗
/* 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 */
}

What is link in text block?

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.

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.

See the complete Link in text block guide for every platform and the full background.

Not sure if your WooCommerce store has this?

Run a free SEOLZ audit — we’ll find link in text block and every other issue across your whole site.

Scan my site free

Fix link in text block on another platform