How can I highlight errors when bright red is the main color of the brand?

Question

I'm working on a mobile website for a client whose main brand color is red. The website header and headings are all red. CTA buttons are red too. How can I effectively separate errors (mostly in form processes) from the content?

Answer 1

Just because your brand color is red doesn't make the use of red for errors obsolete, it's just a matter of extent.

Take the Viaplay signup form for example:

Viaplay has red as their main accent color, which is used throughout the website for actions buttons, icons, header, graphic elements etc.. however, in the form they do tone down the use. They don't let the background be red, or having the labels for the input red either for that matter. So in the context the red error messages still stands out.

To put it short, it's a matter of context even within a context. When it comes to user input, eg. a signup form, simply avoid extensive use of red and the typical in-line error messages will still pop against the background.

Answer 2

In general, using only color to indicate information is bad for accessibility reasons. Red/green colorblindness is the most common and occurs in 8% of males. Using an icon, like an X or warning sign, is the best way to go.

If you must differentiate color for business reasons (i.e. people at the top think it should be a different color), then pick one that is different from the rest of your color scheme but use an icon as the primary indicator. Make sure the color has a high enough contrast with your default text color that the difference is apparent even if a user can't tell what color it is.

Answer 3

Instead of using colors, draw visual emphasis through other means, such as using danger icons, font weight, and/or jagged outlines.

Here's a an example, excessively using all three of these cues:

EDIT: The comments below suggest that I didn't make it clear enough in my original post that using all three of these cues together would be excessive. (I'd thought that my boldfacing of the word "excessively" would be enough to show this.) I'll clarify: using any one of these three cues should be sufficient to draw attention to an error message that appears next to where the user is typing. (If you rely upon any of the above as the primary cue, then color will then become no more than a secondary cue, which can draw further attention, but which is not necessary to notice the message.) I put all three cues in one example quickly to demonstrate the powerful effect of such modifications, and I'm sorry if placing them together has confused people.

Answer 4

You can use a yellow border.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

It would depend on what other colour you are using on the site. Are the fonts black?

Some options that you have are: - Displaying a white background box with an icon in red. i.e. exclamation mark - Dark red border - white border dotted line

If you get a good icon - noticeable border - contrast colour and it's consistent and clear that is an error it should be obvious to the user that it is an error.

Answer 6

@AndroidHustle stated it perfectly in his answer. Context is the key in everything, if a user is filling out a form and they try to submit it and you give them errors telling them exactly what is wrong then they will have no problem understanding that the red lines that just appeared next to the form are validation messages.

Try not to break the mold by using different colors for validation error messages. Red has a lot of meanings but one thing that red does do is catch our attention so using colors like yellow may not attract as much attention as red.