Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am working for a company, which web site uses red as its primary color, because this is the main corporate color (so, this could not be replaced).

The usual convention, of using red to highlight error messages, is being used, but messages are not actually being highlighted, because they seem to be other simple and conventional elements of the site.

I'm not a designer (I'm a backend developer), so I would like to have guidance from you UX/UI experts out there.

Any ideas?

share|improve this question
up vote 1 down vote accepted

If you are talking about web forms, I'd still recommend using a red - but not a saturated red (something like E03030 is nice) and do in-line validation after field entry. Use an error symbol and mark validated fields using a green symbol but not a saturated green (30B030 is nice). Then the error fields will stand out better as the messages are directly in context with the field being edited and you don't have to worry about highlighting fields with after-submit validation.

Luke Wroblewski wrote an article called Inline Validation in Web Forms for the A List Apart website which is very useful in this respect. It describes the testing they undertook and the results found.

share|improve this answer

My advice is to use chrome around the error message and graphic icons to denote errors.

For example, you'll sometimes see error boxes with a black & yellow striped border, or a yellow triangle caution sign with an exclamation point, or a stop sign, etc.

share|improve this answer

Some other attention-getting color? Bright orange? Yellow with black type? I would say "neon green," but green is conventionally "go," so that's out. Magenta? Nobody ever colors anything magenta on purpose unless it's a wig.

share|improve this answer

Keep it simple. Just use a white background for the error message with red type.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.