HIGHWCAG 1.4.1 A
Color-Only Errors
Validation failures are conveyed using red borders alone, with no text or icon reinforcement.
Try It Yourself
Demo warning
Users who cannot distinguish red states receive no meaningful feedback.
Submit the form with empty fields and observe how error states rely only on border color.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Open the form with untouched fields.
- Do not rely on visual color changes for diagnosis.
2. Reproduction Steps
- Submit empty/invalid values to trigger errors.
- Check whether error meaning is conveyed in text, icon, or announcement.
- Attempt to recover and resubmit based only on provided feedback.
3. Expected Failure Signals
- Only border color changes indicate failure state.
- Users who cannot perceive color changes receive no actionable guidance.
- Repeated submission attempts fail without clear correction path.
4. Fix Verification
- Each invalid field includes text guidance tied with `aria-describedby`.
- Error message is announced and visually persistent until fixed.
- Error state is indicated with both text and visual affordances.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 1.4.1 (Level A) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Users do not detect why submission failed
- Error correction loops repeat without progress
- Form abandonment increases sharply
Who Gets Hurt
Color-blind users
Users on low-quality displays
Users needing explicit guidance
The Broken Code
.field.error {
border: 2px solid #d22;
}
/* No icon, no message, no text alternative */WCAG 1.4.1: Reference
"Color is not used as the only visual means of conveying information, indicating an action, or distinguishing a visual element."
Level A - Feedback must be explicit and multi-channel, especially for form recovery.
Related High Issues
Explore neighboring failures in the same severity band.