Link in text block
Quick winFound on 28% of audited stores.
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.
What it is
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.
Why it matters
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.
How to fix it
- Identify the exact hex colors involved: note your link color (e.g. #155dfc) and your surrounding body text color (e.g. #3f3f3f).
- Check the contrast ratio between those two colors using a free tool such as the WebAIM Contrast Checker (enter both hex values). You need at least 3:1.
- Decide on your fix strategy: (A) change the link color to one that achieves ≥3:1 contrast against the body text, OR (B) keep the current link color and add a permanent non-color indicator — the most common and accessible choice is text-decoration: underline on the link.
- If choosing option A, also verify the new link color still meets the standard 4.5:1 contrast ratio against the page background (a separate WCAG 1.4.3 requirement).
- Apply the CSS change site-wide so every inline link inherits it: target the selector that controls body/content links (commonly a { } or .content a { } or a similar scoped rule in your theme stylesheet).
- Re-test with your accessibility scanner and manually confirm by viewing the page in a grayscale browser mode or a color-blindness simulator to ensure links are distinguishable without color.
Fix it on your platform
Pick your platform for the exact steps.
How to fix link in text block on Shopify
- In your Shopify admin, go to Online Store → Themes.
- Next to your active theme, click the three-dot menu (⋯) → Edit code.
- Open Assets → base.css (or theme.css / global.css depending on your theme).
- Search for the existing link rule (e.g. 'a {' or 'a:link'). Add or update: color: #YOUR_NEW_COLOR; text-decoration: underline;
- If you want to scope it only to content/body text blocks, use a selector like '.rte a { }' (Shopify themes wrap rich-text content in the .rte class).
- Click Save, then preview your store and verify links in paragraphs are clearly distinguishable.
How to fix link in text block on Shopify Plus
- Follow the same Shopify steps above; Shopify Plus themes use the same theme code editor.
- For enterprise themes (e.g. custom Dawn forks), the link styles may live in a component file such as sections/main-article.liquid or assets/component-rte.css — search across files for the 'a {' rule.
- Use the Theme Customizer → Custom CSS field (Online Store → Themes → Customize → Theme Settings → Custom CSS) for a quick override without touching source files.
How to fix link in text block on WooCommerce
- In WordPress admin, go to Appearance → Customize → Additional CSS.
- 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; }
- Alternatively, edit your child theme's style.css (Appearance → Theme File Editor) to add the rule permanently.
- For block-based themes (Full Site Editing), go to Appearance → Editor → Styles → Custom CSS and add the rule there.
- Save and use a color-contrast checker to verify the new link color vs. body text color.
How to fix link in text block on BigCommerce
- In your BigCommerce control panel, go to Storefront → My Themes → click Customize on your active theme.
- Open Style Editor: look for a 'Links' or 'Typography' section and update the link color swatch to a compliant color.
- For direct CSS control, click Advanced → Edit Theme Files (requires developer/partner access) and open assets/scss/components/_links.scss or assets/css/theme.css.
- Add or update: a { color: #YOUR_NEW_COLOR; text-decoration: underline; }
- Save and push the theme, then verify visually on a product description or blog post page.
How to fix link in text block on Wix
- Open the Wix Editor for your site.
- Click on a text element that contains a link, then select the linked text.
- In the text toolbar, use the color picker to change the link text color to a compliant value (≥3:1 contrast vs. surrounding text).
- For a site-wide fix, go to Site Design (paint-roller icon) → Text Themes → update the link style color there.
- Alternatively, add custom CSS via Settings → Custom Code (Wix Business/Unlimited plans): add a { color: #YOUR_COLOR; text-decoration: underline; } targeting your site's content areas.
- Note: Wix auto-underlines links by default in most themes; if underline has been removed, restoring it is the simplest compliant fix.
How to fix link in text block on Wix Studio
- In Wix Studio editor, select any text block containing a link.
- Open the Text Settings panel → click the link color swatch and update to a compliant hex value.
- For global control, go to Design System (left panel) → Colors, update your designated link color token to a compliant value — this propagates site-wide.
- Use the Custom CSS panel (site-level or panel-level) to add: a { text-decoration: underline; } as a fallback non-color cue.
How to fix link in text block on Squarespace
- In the Squarespace editor, go to Design → Fonts (or Styles, depending on your version).
- Scroll to the Link Style section and update the link color to a compliant value using the color picker (enter the hex code directly).
- Also confirm that 'Underline' is toggled on for links inside text blocks — this satisfies the non-color distinction requirement even if contrast is borderline.
- For Squarespace 7.1 with custom CSS: Design → Custom CSS, add: .sqs-block-content a { color: #YOUR_COLOR; text-decoration: underline; }
- Save and preview on a page with body text containing links to verify.
How to fix link in text block on Webflow
- In the Webflow Designer, open the Style Panel.
- Select a link element inside a text block (or use the global 'All Links' selector: type 'a' in the selector field).
- Update the Color property to a compliant hex value with ≥3:1 contrast against your body text color.
- Under Typography, ensure Text Decoration is set to 'Underline' — this is the simplest route to full compliance.
- Publish the site and test on a live paragraph containing links.
How to fix link in text block on Adobe Commerce (Magento)
- In your Magento admin, go to Content → Design → Configuration → select your store view → Edit.
- Scroll to HTML Head → add a CSS override in the 'Miscellaneous HTML' field, or navigate to your theme's web/css/source/_theme.less (or .scss) file.
- Update or add the link rule: a { color: #YOUR_NEW_COLOR; text-decoration: underline; }
- Run bin/magento setup:static-content:deploy after any theme file changes.
- Flush the cache (System → Cache Management → Flush Magento Cache) and verify on a CMS page or product description.
How to fix link in text block on Magento Open Source
- Follow the same Adobe Commerce steps above — the theme file structure and deployment command are identical.
- Theme link styles are typically in app/design/frontend/[Vendor]/[theme]/web/css/source/_theme.less.
- After editing, run: bin/magento setup:static-content:deploy && bin/magento cache:flush
Does your site have this issue?
Run a free SEOLZ scan to find link in text block — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does link in text block matter?
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.
How do I fix link in text block?
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.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Color contrast & accessibility — MDN