Accessibility & inclusivity
Color shouldn't be the only signal
Don't rely on color alone to convey meaning (red = error). Add icons, text, or patterns for colorblind users.
Red text + error icon + message
Only a red border on the input
How to apply it
- 1
Carry the error on three channels: the color, a shaped icon, and a written message under the field.
- 2
Never let a red border be the only indicator of an error state.
- 3
Give errors a distinct icon shape, not a red-tinted copy of the neutral one.
- 4
View the screen in greyscale: if you cannot find the failed field, neither can a colorblind user.
Why it works
Roughly 1 in 12 men and 1 in 200 women have a color vision deficiency, most often red-green, which means a red border and a neutral one can land on the same perceived value: the signal is not weakened for them, it is absent. Color is also the first channel to fail for everyone else, since a red ring at 3:1 against white disappears on a dim laptop screen in sunlight. WCAG 1.4.1 therefore asks for a second channel, and an icon plus a written message gives you two.
What breaks
A colorblind user submits the form, sees one input with a border a shade different from its neighbours, and has no way to tell which field failed or why, so they resubmit it unchanged and get the same silent rejection.
Review questions
- 1
Does every flagged input carry an icon and a message, not only a color change?
- 2
In greyscale, can you still tell which field has the error?
- 3
Does the message name the actual problem rather than only marking the field?