F73: When Color Is the Only Clue a Link Exists

Patricia
digitalwcagcolor contrastvisual designtitle iilegal compliance

Patricia · AI Research Engine

Analytical lens: Risk/Legal Priority

Government compliance, Title II, case law

AI-assisted · Source-linked · Editorially reviewed · Methodology

Trust note

This article was drafted with AI assistance, reviewed against accessibility.chat editorial standards, and should be treated as research and education rather than legal advice. We prioritize primary sources and correct material errors.

Back view of a young man in a wheelchair facing steps in a city setting.
Photo by SHVETS production on Pexels

Color-only link identification has been a known failure pattern since WCAG 2.0. The W3C cataloged it. The DOJ has enforced against it. Automated tools flag it constantly. And yet it remains one of the most common accessibility failures across government and commercial websites alike. WCAG Failure F73 (opens in new window) documents exactly why this pattern fails — and the technical details matter more than most developers realize.

The Failure

F73 (opens in new window) describes a failure of Success Criterion 1.4.1: Use of Color (opens in new window), which prohibits using color as the sole visual means of conveying information. For inline links — links embedded within body text — color is often the only distinguishing attribute developers leave in place after stripping the default underline. That's the failure.

The W3C's canonical example is blunt:

CSS
p a:link { text-decoration: none; }
p a:visited { text-decoration: none; }
p a:active { text-decoration: none; }
p a:hover { text-decoration: underline; color: red; }

This CSS removes the underline from all link states and restores it only on hover. To a sighted user with typical color vision, the colored text signals "this is a link." To a user with deuteranopia, protanopia, or any form of color vision deficiency, that signal disappears entirely. The text reads as plain prose. The link is invisible.

The W3C is explicit on the hover question: if the non-color cue — the underline, the border, the icon — only appears when the mouse hovers over the link, it still fails. Hover states are not accessible substitutes for persistent visual differentiation. Keyboard users navigating without a mouse never trigger hover. Mobile users on touchscreens don't hover. The failure applies regardless of how elegant the hover animation looks.

Why This Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. That's not a small edge case — it's a substantial portion of any site's user base, and it doesn't include users with low vision who may perceive color differently due to contrast sensitivity issues.

For those users, a page with color-only link differentiation presents a reading experience where actionable text and static text are indistinguishable. Consider a government benefits page, a legal notice, or a medical information site where inline links route users to critical forms or definitions. A user who can't perceive the color difference doesn't know those links exist. They read past them. They miss the action they were supposed to take.

This isn't an abstract usability concern. Under Title II of the ADA (opens in new window) and Section 504 of the Rehabilitation Act, public entities must ensure their digital communications are accessible to people with disabilities. The DOJ's web accessibility guidance (opens in new window) makes clear that WCAG 2.1 Level AA is the operative standard for federal compliance. SC 1.4.1 is a Level A requirement — the baseline floor, not an aspirational target.

Failing a Level A criterion on a government website isn't a minor compliance gap. It's a fundamental barrier to equal access.

The Fix

The corrected pattern is straightforward. Maintain the underline — the browser default that exists precisely because it communicates "this is a link" without relying on color:

CSS
/* Compliant: underline persists across all states */
p a:link { text-decoration: underline; }
p a:visited { text-decoration: underline; }
p a:active { text-decoration: underline; }
p a:hover { text-decoration: underline; color: red; }

Alternatively, teams that want to suppress underlines for design reasons can use a non-color visual distinction with sufficient contrast. The W3C's guidance on SC 1.4.1 permits this approach: if the link differs from surrounding text by a luminance contrast ratio of at least 3:1 and provides an additional visual cue on hover/focus, the failure is avoided. But both conditions must be met simultaneously — contrast ratio alone without the persistent cue, or the cue only on hover, each independently fails.

The W3C's own note on hue versus lightness is worth understanding precisely: red and pink are the same hue but differ in lightness. If surrounding body text is red and the link is pink, and the contrast between them meets the 3:1 threshold, that passes — because the distinction isn't color (hue) alone. This is a nuanced reading of the criterion that most automated tools handle imperfectly.

Applying This

Automated testing catches some instances of F73, but not reliably. Tools can detect text-decoration: none on anchor elements, but they struggle to evaluate whether the resulting contrast between link and surrounding text meets the 3:1 threshold — especially when colors are defined dynamically or inherited through CSS custom properties. Our research on automated testing limitations found that automated tools catch at most 37% of real accessibility failures. F73 is exactly the kind of nuanced, context-dependent failure that falls into the remaining 63%.

For code review, the practical check is simple: search for text-decoration: none applied to any a selector. Every instance requires a manual review of the surrounding context. Is this link in body text? What's the contrast ratio between the link color and the adjacent text color? Does a non-color visual cue persist across all states, not just hover?

Design systems are the highest-leverage intervention point. If the component library defines a compliant link style — underline persistent, contrast sufficient — developers inherit the correct pattern automatically. The failure tends to proliferate when individual teams override base styles without understanding the accessibility implications. A documented design token for link appearance, locked to compliant values, prevents the problem upstream.

ConditionPasses SC 1.4.1?Notes
Underline on all states✅ YesBrowser default; most reliable
Color only, no underline❌ NoClassic F73 failure
Color + underline on hover only❌ NoHover-only cue still fails
3:1 contrast vs. body text + hover/focus cue✅ YesBoth conditions required simultaneously
Bold + color, no underline✅ YesBold is a non-color distinction
Hue difference with ≥3:1 lightness contrast✅ YesPasses if contrast threshold met

CORS Perspective

From a risk and legal priority standpoint, F73 sits at a peculiar intersection: it's a Level A failure — the most fundamental tier of WCAG compliance — that is simultaneously easy to introduce through ordinary CSS and easy to miss in automated testing. For government entities subject to Title II, a Level A failure on high-traffic informational pages creates direct legal exposure, particularly where the affected content involves benefits, services, or legal rights. The compliance framework research we've published shows that organizations often focus remediation energy on higher-visibility issues while baseline failures like F73 persist unaddressed in design systems for years. Fixing this at the design-system level — not page by page — is the only operationally sustainable answer.

About the Patricia lens

A risk and legal lens. Frames findings around regulatory exposure, drawing on Title II obligations, published case law, and government compliance requirements.

Patricia is an AI analyst lens, not a human staff member. It helps frame this article through a consistent accessibility perspective.

Specialization: Government compliance, Title II, case law

View all articles using this lens →

Transparency Disclosure

This article was drafted with AI assistance and reviewed against our editorial methodology. We disclose that process so readers can judge the work clearly.