Links in a paragraph told apart by color alone

What the requirement is

A link inside a paragraph has to be distinguishable from the words around it. Color alone does not do that, because a reader with a color vision deficiency may see the link and the surrounding text as the same shade.

WCAG success criterion 1.4.1 Use of Color, Level A, covers this. An underline is the simplest answer. The alternative documented in WCAG technique G183 is a link color with at least 3:1 contrast against the surrounding static text, on top of each color meeting its own contrast requirement against the background.

What squirrel checks

One check, link-in-text-block, at severity warning. It looks inside text-bearing elements only: <p>, <li>, <td>, <th>, <dd>, <blockquote> and <figcaption>.

For each a[href] inside one of those, it flags two markup patterns:

• an inline style that contains the substring text-decoration and either contains none anywhere in the value or does not contain underline. The tests are plain substring matches over the whole attribute, so text-decoration: underline; display: none also matches.
• a class containing no-underline or text-decoration-none

Findings are reported as N link(s) in text may lack underlines, quoting the first 30 characters of each link’s text, up to ten with a count of the rest. The finding carries the note Links need visual distinction beyond color and the suggestion Ensure 3:1 contrast with surrounding text or add underlines. With nothing flagged the check passes as Links in text blocks appear distinguishable, and with no links in text at all it returns info with No links found in text blocks.

Only inline styles and those two class names are visible to it. A stylesheet rule setting a { text-decoration: none } is not fetched, so a pass here is not evidence that the links are distinguishable.

How to fix it

article a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Underline links in running text and reserve the undecorated style for navigation and buttons, where position already says what they are.

text-underline-offset and text-decoration-thickness make an underline sit comfortably under the text, which removes most of the reason designers take it off.

Enable / disable

Disable this rule

[rules]
disable = ["a11y/link-in-text-block"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/link-in-text-block"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• a11y/color-contrast: text against its background. It does not measure link text against the words around it, which is what G183 needs.
• a11y/link-text: what those links say once they are visible.
• a11y/focus-visible: the keyboard equivalent of the same problem.
• links/anchor-text: the same links judged as ranking signals.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

References

• Understanding SC 1.4.1 Use of Color, W3C
• G183: Using a contrast ratio of 3:1 with surrounding text, W3C
• text-decoration, MDN

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. Each flagged link is quoted by its opening words. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.