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?

6 Answers 6


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:

enter image description here

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.

  • 1
    I'm going to reiterate @RoddyoftheFrozenPeas' comment on my answer here: [For accessibility] Color should be a secondary indicator used in conjunction with other indicators such as symbols, icons, or special fonts.
    – elemjay19
    Commented Apr 26, 2013 at 18:54
  • @norabora that's no news to me. I've been practising interaction design since 2005, so that solely depending on a colour to convey a state being a bad idea is nothing new to me. However, the OP stressed the issue he saw in using red for error messages in a red predominant context. So I gave my two cents on that specific question, but left out the accessibility aspect (even though the image clearly depict it). I thought your answer that clearly stressed the importance of accessibility was a good one, which was why I +1'd it. Can't help that the majority liked mine better though. Commented Apr 27, 2013 at 10:50
  • 1
    This comment was more for those who come to look at this answer, since it is the accepted answer, to make sure that anyone who doesn't have 8 years design experience and doesn't know about the pitfalls of using color to solely display state will learn it. I'm not trying to take over your answer, just provide more information for other users.
    – elemjay19
    Commented Apr 28, 2013 at 4:13

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.

  • 6
    +1 for mentioning color blindness. Generally speaking, color should be a secondary indicator used in conjunction with other indicators such as symbols, icons, or special fonts. Commented Apr 22, 2013 at 19:05

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: enter image description here

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.

  • 16
    You're missing fire, smoke and sound effects, then it'd be an excessive example.
    – Matt
    Commented Apr 22, 2013 at 19:27
  • 21
    You're forgetting <blink>
    – mob
    Commented Apr 22, 2013 at 21:34
  • 8
    and put it in <marque> so it can move from left to right
    – mkk
    Commented Apr 23, 2013 at 7:55
  • 3
    Yes, <blink> and it should flicker between italic and normal style font
    – Adam Lynch
    Commented Apr 25, 2013 at 19:26
  • 2
    @unor +1 - Yes!, if quoted like this: "abc@abc"@example.com, or "abc\@abc"@example.com. but it's hard (impossible) to find an email provider to let you do that. And also hard to find a web-form that will let you enter that. I frequently find web-forms that won't let you enter +plus addressed email addresses like [email protected]. Commented May 4, 2013 at 0:48

You can use a yellow border.


download bmml source – Wireframes created with Balsamiq Mockups

  • 9
    Just beware that a yellow border is also used, by Chrome for example, to denote the input field having focus. Commented Apr 22, 2013 at 17:54
  • 2
    Interesting. I really have a brownish yellow overhere almost identical to the one in your mockup. Using Chrome "bare metal" fashion: no customisations. Could that have some influence? Commented Apr 22, 2013 at 18:14
  • 2
    Also, in Opera (depending on skin and theme), a yellow border means you have a saved login/form entry for that field. Commented Apr 23, 2013 at 1:24
  • 1
    This calls for a standardization! :D
    – rk.
    Commented Apr 23, 2013 at 11:59
  • 2
    Just for the record, WebKit—including Chrome for now—implements focusRingColor based on platform. On the Mac, it's rgb(125, 173, 217) (light blue) and by default on Windows and Linux it's rgb(229, 151, 0) (gold).
    – Kit Grose
    Commented May 6, 2013 at 5:35

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.


@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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