- Success Criterion 1.4.1
- Conformance level A
- W3C reference F73
In-Text Links Distinguishable From Body Text Only by Color
1.4.1 — Use of Color
Scenario
Setting
A project-management tool's task board
What’s wrong
Links inside paragraphs look identical to normal text except for color — colorblind users can't tell what's clickable.
Example
Try this on a project-management tool's task board: links inside paragraphs look identical to normal text except for color — colorblind users can't tell what's clickable.
Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare. On a project-management tool's task board specifically, they can't perceive part of the content because of how it's displayed.
How to test
View the page in grayscale (Chrome DevTools > Rendering > Emulate vision deficiencies): if in-text links become indistinguishable from surrounding text, it fails.
How to fix
Underline in-body links (or add a non-color cue plus 3:1 contrast with surrounding text).
Outcome
Fixed, a visitor to a project-management tool's task board can see the control's boundary and current state.
Who is affected
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Chart Legend Colors Never Explained in the Image’s Alt Text
- Required or Error Fields Marked Only by a Red Border
- Chart Data Series Told Apart Only by Line or Bar Color
- Online/Offline Status Shown Only as a Colored Dot
- Form Validation That Turns Borders Red as the Only Cue
- Calendar Availability Shown Only Through Colored Cells