- Success Criterion 1.4.1
- Conformance level A
Highlighted Text Meant to Signal Importance by Color Alone
1.4.1 — Use of Color
Scenario
Setting
A coworking-space booking app
What’s wrong
Text highlighted in color to mean "important/changed" with no other cue (interacts with 1.3.1).
Example
<p>Your booking includes free cancellation. <span style="background:#fef08a">This deadline moved to 24 hours before check-in.</span></p>
<!-- yellow highlight is the only signal that this sentence changed --> Why it matters
A member skimming their booking confirmation misses that the cancellation window shrank, then gets charged for a late change.
How to test
View text highlighted to mean 'important' or 'changed' in grayscale: if the highlight's meaning disappears, it fails.
How to fix
Pair the highlight with a bold "Updated:" label so the change is legible without depending on color perception.
<p>Your booking includes free cancellation. <strong>Updated:</strong> <mark>this deadline moved to 24 hours before check-in.</mark></p> Outcome
The member reads the bolded update and cancels a day earlier, avoiding an unexpected fee.
Who is affected
Low-vision users who don't perceive the pale yellow highlight as distinct from the surrounding paragraph.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Chart Legend Colors Never Explained in the Image’s Alt Text
- In-Text Links Distinguishable From Body Text Only by Color
- 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