Is the color red really appropriate for form validation errors?

Question

It seems to be taken for granted that the color red is appropriate to highlight errors. In the case of serious system errors, I agree. However, I'm having doubts that it's the right choice for user generated errors, like form validation.

It's common to see something like this:

To me, this feels equivalent to blaming or yelling at the user. I've considered something like this instead:

It feels like a message with a gentler tone even though the words are the same.

My opinion: Users don't need to feel like they caused an "error", and forms are already annoying enough as it is, especially when you've made a mistake or two (because after all, the user isn't trying to pass in an invalid email on purpose). It's just a small, correctable mistake - not a show-stopper.

System errors are a different thing: they aren't necessarily the user's fault, and they can really mean that something is broken or out of the user's control. Is there any reason why user generated errors should (or should not) be red?

* ^{Note: I'm concerned about the colors, not necessarily the message text or icons.}

Answer 1

I think red is pretty much the convention in this context so you should use red for errors that need to be fixed before you can move on/send the form. Yellow is in general for warnings (eg. user perhaps should/could improve something, but it does not stop from proceeding). Yellow can be used with for example with one of those password strength thingies where bar shows how strong your password is: warn user when they give weak or very common password.

You should follow conventions (unless you have a very strong reason not to). To paraphrase Jakob's Law of the Web User Experience: people will spend most of their time somewhere else than on your website.

One important point to understand is that using conventional colors for errors is important because they make the errors more noticeable. User being annoyed by the color of error message is lot less of a problem than user not being able to complete the form because they didn't notice the error. At least in most cases.

Answer 2

Red for error messages and alerting to something that is of critical attention is pretty standard in Western society.

It is well used in operating systems, like Windows and OSX to use red for error, yellow for warning and green for success messages. This might be as subtle as just having a red “X” or a green tick, but they communicate the status of the message. Here are some Windows developer guidelines for colour use: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511283.aspx#meaning

You will even spot this on our roads. Red, yellow and green traffic lights. Red stop signs and no-entry signs. It is a cultural reference that we are very accustomed to.

In fact, during a recent round of usability testing, we had some messages incorrectly coloured as warnings when they should have been error red, and the feedback from the users was that these needed to be clearer and look more like an error message. In some instances specifying red was the preference.

If the context for red is required, users generally won’t feel shouted at or feel like they are made to look bad.

Unless you have a very good reason to not use red for error messages, you should conform to cultural customs and conventions. If you do decide to use something different, make sure that you test it to make sure it works.

I hope this helps.

Answer 3

I think we're overlooking an important use-case: Some companies' brand colors are red/orange/pink, and in many cases we're associating brand color with errors is not good practice.

Color is just one design tool - in these cases using a warning/error icon that is not red (yellow/purple - something with relative contrast) is preferred.

Answer 4

In my experience “Red” seems to be the color that most users associate with error. Most user environments utilize red for warning and respond accordingly. However, if the background or text does not contrast well, then using another color is acceptable.