35

I have the color: #4285f4 and I'm looking for a easy to read error color code. I'm using Google's default error color: #dd2c00. However this doesn't read very well on the page...

Example

  • 13
    You sure you want a blue background? Seems a little unconventional. – oldmud0 Apr 22 '17 at 4:20
  • 3
    Don't hard-code background colors. Allow the user to pick what they prefer.. – jamesqf Apr 22 '17 at 4:58
  • 35
    FYI, this blue background is pretty much unbearable by itself, tuning colors of the details on top of it won't save it – Sarge Borsch Apr 22 '17 at 5:22
  • 1
    The general rule, at least on a monitor with R, G and B channels, the approach is not use colour combinations where one of the channels for the foreground is lighter than the one for the background, and another is darker. That is what causes the unpleasantness. (Can't seem to find an authoritative reference right now thou, so not posting as an answer.) As examples, if the background is rgb(63,128,247), you can go with, for instance, dark red (63,0,0), or light pink (255,128,255), depending on the rest of your colour scheme, but not (231,40,0). – Mr Lister Apr 24 '17 at 7:00
  • 1
    @MrLister There's another issue specific to red & blue: they're on opposite end of the spectrum, meaning the eye has to re-focus slightly when shifting from red to blue or vice versa. This adds to the strain and unpleasantness of reading in such combination. – Angew Apr 24 '17 at 8:04
19

Show your error message on a neutral-colored box.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 5
    I'm in favor of this approach. You can "soften" the look by using a 62.5-75% opacity on the background white and no border and consider rounding corners. I'd also add an error icon as @Majo0od suggested. – Stonetip Apr 21 '17 at 20:50
  • 2
    I think this is a good solution for hard stop errors. In the case of field validation / completion, it's probably overkill. – plainclothes Apr 21 '17 at 21:02
94

MD guidelines aren't rules

The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it doesn't have everything for every scenario. Don't be afraid to part with them.

Working off of your blue background, I quickly landed on an "alerting" color that stands out without painful contrast. Changing the alert text to bold will help it read too. And, as mentioned elsewhere, well-known icons are a good way to draw the user's eye as well.

enter image description here

You'll notice a few other suggestions in there as well. Just food for thought.

  • Differentiate the Accept action over Cancel. The user presumably initiated this form so acceptance is the more likely intent.
  • Consider more natural labels for your field to encourage entry.
  • Increase the size of the error text. That will help with read too.
  • I only changed the color of the field underline. This is usually sufficient to highlight the problem and helps to emphasize the error text.
  • 11
    Perfect color choice this is what I was thinking too. It could be problematic if your site needs to distinguish between a "warning" and an "error" as yellow is the typical warning color, but I think a well written message or icon could make that distinction for you. – DasBeasto Apr 21 '17 at 18:15
  • It does break from the norm (I also used the "error" icon because I think it reads better at a glance). IME, the distinction between warning / error is rarely about color choice -- it has more to do with context and blocking user progress. Whether or not it's a "warning" or "error" ends up being an engineering concern. – plainclothes Apr 21 '17 at 18:20
  • 1
    This is a good option for accessibility as well - something in this range will provide good contrast and an attention-catching color for any user, including those with any of the common types of color blindness (and the icon helps for full color blindness). Even for people who see color just fine, yellow on bright blue is downright pleasant compared to the eyestraining horror of bright red on bright blue. – tobybot Apr 21 '17 at 19:48
  • I'd put Accept left of Cancel, which is common from OK/Cancel dialog boxes. – GolezTrol Apr 24 '17 at 15:01
7

Light yellow would have better contrast on the blue background. Though I've also seen some UIs use a lighter fuchsia/pink to contrast with darker blues. I found two swatches in the Material design color guidelines that may work:

Yellow: #FFFF00
Pink: #FF80AB

enter image description here

  • 7
    This color scheme makes me think of Easter Eggs – n_b Apr 21 '17 at 20:46
  • 30
    That salmon colour has an abysmal 1.6 contrast ratio with the background. It hurts my eyes, too. I'd advise against using that one. It would work better if the background were darker. – Schism Apr 21 '17 at 23:47
  • 4
    Do not use that pink. – Cooper Buckingham Apr 23 '17 at 17:35
  • 1
    For me, your yellow stands out a lot more than your pink. If you really want the text to scream "error", maybe try something in between the two. Something nice and orangey. – Dawood ibn Kareem Apr 24 '17 at 1:07
  • The yellow both screams out far more than the pink and is very hard to read. I get some strange black ghost-images in the yellow line, for example, presumably 'cause it's so bright. Very distracting and unpleasant to my eyes. – terdon Apr 24 '17 at 15:33
3

I tend to mix whatever the default colour is with red until the colour feels warm, but the text is still readable. You can mix with orange or yellow for warnings, mix with blue (or white) for neutral and mix with green for positive messages.

This works because people associate a wider range of colours with certain levels of severity.

An alternative would be to change the background instead of the text colour, to make the message stand out. Again, mix the background colour with red, orange/yellow, blue/white or green depending on what message you want to convey.


If none of the standard hues work, go for any alternative colour, but use an icon or a descriptive text such as "Error", to make it stand out and convey the meaning of the text in that way. Using an icon is probably something you want to do regardless, because they are more recognisable than colours, especially if anyone using your application is colourblind/colour deficient.

1

Errors are not only conveyed by color

Errors can be displayed in a combination of ways to show that they are an error:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is only two of multiple variations. Also keep in mind that the animation of a message popping up after an action has been taken will also create an affordance of what type of message it is.

My recommendation is sticking to adding an icon prefixed to your message.

If that doesn't do the trick, then maybe you need to reconsider the usage of a blue background.

  • 4
    Makes me kinda nostalgic for that old monochrome Mac "bomb" icon. – neminem Apr 21 '17 at 22:28
  • 1
    @neminem, how about the "dead Mac" icon with X's for eyes? In my opinion that one was a bit alarming and upsetting; not exactly the best UX. :D – Wildcard Apr 24 '17 at 8:55
  • "the animation of a message popping up after an action has been taken will also create an affordance of what type of message it is" The word "affordance" doesn't fit this sentence. The animation does not create a new physical possibility. It draws attention and adds information, it does not create an affordance. – spex Apr 24 '17 at 15:00
  • @spex The definition of affordance for UX is: "...defined it as the relationship between an environment and an actor..." via webdesignerdepot.com/2015/04/… therefore, I guess, the animation is the affordance. Never knew this place was also very nit picky about wording. Will be careful next time... – Majo0od Apr 24 '17 at 16:02
  • 1
    @Majo0od being careful about word choice is important when discussing technical matters. This is not a personal attack or judgement on you as a person, simply a clarification on the technical matter. Even with regards to the definition you posted, the information about the message type is still not an affordance. The article you linked reinforces this statement. The information about the message type does not afford the user the ability to perform an action. Instead it informs the user about the current state, which is, of course, a good thing; just not an affordance. – spex Apr 25 '17 at 16:27
1

The trick is to use alpha color instead of a solid color.

Google describes this in their Material Design specs under the bullet point "Legibility".


From the specs:

The text "The woodman set to work at once" has the same color in both pictures. In the first one, it is solid.

Bad contrast

In this picture, black is used as initial color. The opacity has been decreased, to let the background-color shine through, providing a better contrast.

dff

Source of images


So, try to set your error color a bit transparent. Experiment with lighter or darker red variations.

Material Design red palette

Image source

Example with Google's default error color:

rgba(221, 44, 0, 0.87)

  • So you suggest rgba(221,44,0,0.87)instead of rgb(192,38,0), but wouldn't it be consequent to go all the way to rgba(255,50,0,0.75)? – Hagen von Eitzen Apr 24 '17 at 13:53
0

Play around with the background when it comes to colors that do not compliment each other.

  • You can remove the Placeholder text while showing the error as the error clearly states what the user needs to do.
  • Reduce the opacity of the ACCEPT button to represent the importance of the error message. (Which, in this case, is very high as not adding a title wouldn't let the user save the note.)

Background color of the error is turned red rather than the text color

NOTE : Maybe SAVE would be a better text for the okay-state button. Just a thought but I could be wrong as I am not completely aware of the context.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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