How to fix link in text block on Webflow
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 Webflow
- Open your project in the Webflow Designer.
- In the left panel, go to Navigator or click directly on a link element inside a Rich Text block or paragraph.
- On the right-side Styles panel, select the `All Links` or `a` tag-level selector (choose 'Tag' from the selector type dropdown).
- Update the Color property to a value with ≥3:1 contrast against body text color, and/or set Text Decoration to 'Underline'.
- For Rich Text link styles specifically, select a Rich Text element → go to its styles → click the '…' inside the Rich Text settings to style nested elements including links.
- Publish and verify on a staging/live page using the axe DevTools extension.
/* 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 Webflow 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