How to fix link in text block on Adobe Commerce (Magento)

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 Adobe Commerce (Magento)

  1. Create or edit a child theme to avoid losing changes on upgrade: `app/design/frontend/<Vendor>/<theme>/web/css/source/_theme.less` (or `_extend.less`).
  2. Locate or add the link color variable — in Luma-based themes look for `@link__color` in `web/css/source/_variables.less` — and set it to a hex value passing ≥3:1 contrast against body text.
  3. To enforce underlines globally, add: `a { text-decoration: underline; }` in your `_extend.less` or equivalent SCSS partial.
  4. Run `bin/magento setup:static-content:deploy` and clear cache (`bin/magento cache:flush`) to compile the updated CSS.
  5. Verify on a CMS page, product description, and blog post (if using a blog extension) using browser DevTools accessibility panel.
Official Adobe Commerce (Magento) 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 Adobe Commerce (Magento) 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