How to fix link in text block on Squarespace

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 Squarespace

  1. Go to Website → Pages → (any page with a text block) → Edit → click a text block → select a hyperlinked word.
  2. In the text toolbar, change the link color using the text-color picker to a value with ≥3:1 contrast against surrounding text, OR enable the underline button so the link is visually distinct without relying on color alone.
  3. For global link styling: go to Design → Custom CSS and add: `a { color: #0056b3 !important; text-decoration: underline !important; }` — use a color that passes contrast checks against your body text color.
  4. In Squarespace 7.1 you can also go to Design → Fonts → Additional Styles to set global link decoration.
  5. Save and preview across Blog, Products, and static page text blocks to ensure the rule applies everywhere.
Official Squarespace 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 Squarespace 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