Skip to content
StoreA11y

WooCommerce · 1.4.1 Use of Color (Level A)

Links in body text are distinguished by colour alone on WooCommerce

Some links inside paragraphs are identified only by their colour, and the contrast against the surrounding text is under 3:1. A shopper with colour-vision deficiency cannot see that the text is a link at all. This appears constantly in policy and shipping pages.

Which WCAG criterion this fails

  • Does not meet 1.4.1 Use of Color (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Underline links inside body copy. It is the simplest fix and costs nothing.
  2. If the brand forbids a permanent underline, the link colour must differ from the body text by at least 3:1 and the underline must appear on hover and on focus.
  3. Apply it to rich-text areas only, so navigation and buttons keep their own styling — scope the rule to the theme's rte / rich-text class.
  4. Do not remove the underline via a global a { text-decoration: none; } — that is normally where this defect starts.

Where this usually lives

Child theme style.css — scope to .entry-content a

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

.rte a,
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: #1a4f8b; /* 7.2:1 on white */
}
.rte a:hover { text-decoration-thickness: 2px; }

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: link-in-text-block (axe-core).