- Success Criterion 1.4.1
- Conformance level A
Form Validation That Turns Borders Red as the Only Cue
1.4.1 — Use of Color
Scenario
Setting
An online spreadsheet's toolbar
What’s wrong
Form validation turning borders red as the only error indication (specific instance of F81 pattern).
Example
Consider an online spreadsheet's toolbar: form validation turning borders red as the only error indication (specific instance of F81 pattern).
Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare. On an online spreadsheet's toolbar, that means they can't perceive part of the content because of how it's displayed.
How to test
View a form with a required-field error in grayscale: red-only borders with no icon or text label fail.
How to fix
A second visual cue (text, underline, icon, or pattern) must convey the information alongside color.
Outcome
With the fix in place on an online spreadsheet's toolbar, they 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
- Calendar Availability Shown Only Through Colored Cells