Last week I wrote about form errors that screen readers never announce, which violates WCAG 4.1.3 Status Messages. There's another layer to the problem that most developers overlook, even when they do add a visible error message: color alone is not enough.
Turning a border red or writing "Invalid" in red text fails users with color blindness, and it violates WCAG 1.4.1 Use of Color.
An accessible error message needs three things working together:
- A non-color indicator, like an icon
- A clear message that says what's wrong, not just "invalid"
- A format suggestion to guide the correction
These are small changes, and real users notice them.
The image above shows the wrong way and the right way side by side.
WCAG 2.1 criteria referenced:
- 1.4.1 Use of Color: color must not be the only visual means of conveying information
- 3.3.1 Error Identification: errors must be described in text
- 3.3.3 Error Suggestion: suggestions for correction must be provided
- 1.4.3 Contrast (Minimum): text contrast must meet 4.5:1 (AA)