While moderating usability testing for a payroll web application, I saw many test participants fail test questions when color was used to indicate that a field was in error.
From the Section 508 of the US Rehabilitation Act: "Color is not used solely to convey important information."
From March 2012 usability test findings:
- Some users could not tell which field was in error due to similar colors of field outlines. To most users, the red outline of the missing information was not obvious. Two users tried to “correct” the field outlined in orange and not in red. This could have been because they were color blind and these colors looked very similar.
- Although the error description at top of screen did display, the error message beside the field did not display until user clicked into field. User 4 did not seem to see field outlined in red and tried to correct the wrong field. If the error message beside the field had displayed, this, and all other errors, would have been corrected much faster.
In the above example, the red outline around fields in error is a thicker line and darker in color. The error icon is displayed with error message beside the field in question. Both indicators display both when the user clicks the Save button.
This is another example I found of displaying error indicators on a form.