“Links Rely on Color to Be Distinguishable” — How to Fix This PageSpeed Insights Issue Correctly

When running an audit in PageSpeed Insights, you may encounter the accessibility warning:

Links rely on color to be distinguishable.

At first glance, this can feel confusing. The links are visible, clickable, and readable—so what exactly is wrong? More importantly, how do you fix it without breaking your design system?

This article explains the real meaning behind this warning, why it matters for accessibility and SEO, and how to resolve it using clear, standards-compliant solutions.

What This Warning Actually Means

This issue occurs when inline links inside a block of text are visually differentiated only by color.

Example:

Please read our privacy policy for more information.

If "privacy policy" is:

The same font size
The same font weight
No underline
No border or background
Distinguished only by a different color

Then PageSpeed Insights flags it as an accessibility failure.

The rule is based on accessibility standards implemented by tools like Deque University, which focus heavily on real-world usability—not just visual aesthetics.

Why Color-Only Links Are a Problem

Relying on color alone creates issues for multiple user groups:

1. Color Vision Deficiency

Users with color blindness may not perceive the color difference between link text and surrounding content.

2. Low Contrast or Custom Displays

High-contrast modes, grayscale displays, or custom browser styles can remove color distinctions entirely.

3. Cognitive Accessibility

Users should not have to “guess” what is clickable content. Links must be immediately recognizable.

Because of these factors, accessibility guidelines require a non-color visual indicator for links.

Why PageSpeed Insights Flags This Issue

PageSpeed Insights uses automated accessibility checks (based on axe rules) to detect when:

An <a> element is inside a paragraph or text block
The link has no underline
There is no visual cue other than color

Even if contrast ratios are technically sufficient, the rule still fails if color is the only differentiator.

This is why the issue appears even on modern, well-designed websites.

The Correct Ways to Fix the Issue

✅ Solution 1: Underline Inline Links (Best Practice)

The simplest and most reliable fix is to underline links within text blocks.

p a {text-decoration: underline;}

This immediately satisfies accessibility requirements and is universally understood by users.

You can still customize the underline:

p a {text-decoration-thickness: 1.5px; text-underline-offset: 2px;}

✅ Solution 2: Add a Non-Color Visual Indicator

If you do not want traditional underlines, you must add another visual cue:

Bottom border
Background highlight
Font weight change combined with another indicator

Example:

p a { border-bottom: 1px solid currentColor; text-decoration: none;}

Important: Font weight alone is not sufficient. It must be combined with another visual element.

❌ What Does NOT Fix the Issue

Avoid these common mistakes:

❌ Making the link a brighter color only
❌ Increasing contrast only
❌ Relying on hover styles
❌ Bold text without underline or border

Accessibility rules apply to the default state, not hover or focus states.

Do Navigation Menus Have the Same Requirement?

No. This rule mainly applies to links within text blocks.

Navigation menus, buttons, and cards usually:

Have spacing
Use layout separation
Include visual grouping

Because of that, they are not evaluated under this specific rule.

The warning is almost always about inline links in paragraphs, articles, blog posts, and legal text.

SEO and UX Impact

While this is technically an accessibility issue, fixing it also improves:

User trust and clarity
Content scannability
Mobile usability
Compliance with WCAG guidelines

Indirectly, better accessibility supports SEO by improving overall page quality and user experience—especially for content-heavy pages.

How to Verify the Fix

After applying changes:

Re-run PageSpeed Insights
Check the Accessibility section
Confirm the warning is removed
Optionally validate using browser accessibility inspectors

If underlines or borders are present on inline links, the issue will no longer be reported.

Final Takeaway

The “Links rely on color to be distinguishable” warning is not a design critique—it is an accessibility safeguard.

Key rule to remember:

If a link is inside a paragraph, it must be identifiable without relying on color alone.

Add underlines or another non-color visual indicator, and the issue is permanently resolved—without sacrificing design quality.

Source(s)

Deque University