- Success Criterion 1.4.1
- Conformance level A
- W3C reference F81
Required or Error Fields Marked Only by a Red Border
1.4.1 — Use of Color
Scenario
Setting
A car-rental site's checkout flow
What’s wrong
Required fields or fields with errors are marked by color only (red border) — colorblind and screen reader users can't tell which field is the problem.
Example
A car-rental site's checkout flow shows the problem clearly: required fields or fields with errors are marked by color only (red border) — colorblind and screen reader users can't tell which field is the problem.
Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare. In this case (a car-rental site's checkout flow), they can't perceive the control's boundary or state.
How to test
Trigger a form error in grayscale: if the only change is a red border/text with no icon, symbol, or text label, it fails.
How to fix
Mark required/error fields with text or an icon plus a programmatic attribute — never color alone.
Outcome
Once corrected, a car-rental site's checkout flow 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)
- Technique Related technique (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
- 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