- 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
<span class="required-field"></span> <!-- red asterisk only -->Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare.
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.
<span class="required-field">* <span class="visually-hidden">required</span></span>Color alone (a red dot or border) can't be the only signal — pair it with text or an icon plus label.
Outcome
On an online spreadsheet's toolbar, this barrier is gone for people with color-vision deficiency — they get the same result as anyone else here.
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