How to fix link in text block on WooCommerce

Increase the color contrast between inline links and their surrounding body text to at least 3:1, or add a non-color visual distinction (such as underline) so links are identifiable without relying on color alone.

Steps for WooCommerce

  1. In WordPress admin, go to Appearance → Customize → Additional CSS.
  2. Add a scoped CSS rule targeting links inside post/page content, e.g.: .entry-content a, .woocommerce-product-details__short-description a { color: #0044cc; text-decoration: underline; }
  3. Alternatively, edit your child theme's style.css (Appearance → Theme File Editor) to add the rule permanently.
  4. For block-based themes (Full Site Editing), go to Appearance → Editor → Styles → Custom CSS and add the rule there.
  5. Save and use a color-contrast checker to verify the new link color vs. body text color.
Official WooCommerce documentation ↗

What is link in text block?

When a hyperlink sits inside a block of regular text (a paragraph, product description, blog post, etc.), visitors must be able to tell which words are clickable. If the only difference between a link and the surrounding text is color, that color must be visually distinct enough — a contrast ratio of at least 3:1 between the link color and the surrounding text color. If you also provide a non-color cue, such as an underline, that 3:1 requirement can be waived. This rule comes from WCAG 2 Success Criterion 1.4.1 (Use of Color), which states that color must not be the only visual means of conveying information.

Roughly 8% of men and 0.5% of women have some form of color vision deficiency, and many more users browse on low-contrast screens or in bright sunlight. When links blend into surrounding text, those shoppers miss navigation cues, calls-to-action, and important policy links — reducing conversions and trust. Failing WCAG 1.4.1 is a recognized accessibility violation that creates legal exposure under the ADA (US), EN 301 549 (EU), and equivalent laws in the UK, Canada, and Australia. Search engines also parse link structure; ambiguous inline links can weaken your site's topical signals. Fixing it is typically a one-line CSS change and immediately benefits every visitor on every device.

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 scan — 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