- Success Criterion 1.4.1
- Conformance level A
Added and Removed Content Shown Only via Background Color
1.4.1 — Use of Color
Scenario
Setting
A fashion e-commerce site's checkout page
What’s wrong
Diff views (added/removed) shown purely by red/green backgrounds without +/– or labels.
Example
Watch a fashion e-commerce site's checkout page closely and you'll spot this: diff views (added/removed) shown purely by red/green backgrounds without +/– or labels.
Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare. In this case (a fashion e-commerce site's checkout page), they miss information conveyed only by color.
How to test
View a diff/comparison view in grayscale: if added/removed content is shown only via red/green backgrounds with no +/- symbols or labels, it fails.
How to fix
A second visual cue (text, underline, icon, or pattern) must convey the information alongside color.
Outcome
Once corrected, a fashion e-commerce site's checkout page lets them tell the information apart without relying on color.
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)
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