Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

The goal

Choose a good color combo for my alert message for a dark background.

The scenario

This is what I have now:

Error message

  • Borders/font color: #e84e4f
  • Alert background-color: #9c2b2e
  • Body background color: #d2cece

The problem

I don't know... I just think that colors aren't good enough for the scenario. Of course, it depends of my context, but I think the reds are too heavy, painful and shocking for humans' eyes - don't you think the same?

I need some other harmonious color to indicate validation errors that fits well the background.

Suggestions?

share|improve this question

migrated from ux.stackexchange.com Jan 27 at 23:16

This question came from our site for user experience researchers and experts.

    
+1 for a lighter color, @Zhouzi. I'd leave the border as-is, and look for a pink in the family of the red background to use with the text. White may bleed too much (make the text look fatter and reduce readability), so experimentation is good. Per IronBasset, goal is to increase contrast. –  Matt Jan 27 at 16:51
    
Why would this be moved from user experience? If this isn't a UX question then why is that site around? –  leigero May 6 at 0:54

7 Answers 7

up vote 16 down vote accepted

I think all you need to do is change your text color to White:

enter image description here

share|improve this answer
2  
+1 for simple elegance. This is why I'll never be a good UX creator: no mind for visual aesthetics at all. –  Jeff Gohlke Jan 27 at 19:39

You're right with the colours not enough for the scenario - there is not enough contrast for it to be easily readable. Heres a good read on wording too, which might be of use - I would steer away from thge wording 'Oops' too :-)

http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/

For the colour - I would recommend a translucent red or 'light pink' I suppose - fairly standard colour with error messaging and enough of a contrast from the dark red writing.

(I am +1 the answer above because they bring up a good point about the iconography.)

share|improve this answer

To a degree the question of color can be more about aesthetics which is more suited to the GD stack exchange.

However, from a usability standpoint, the most important issue when dealing with light or dark backgrounds is making sure the element has sufficient contrast.

To that end, I would suggest using something like this color contrast tool to measure your foreground and background colors.

The current values you are using are too similar:

enter image description here

It doesn't matter what color it is if your users (including those with less than perfect vision) can't read it.

I would either make the background darker and the text lighter if you want them to both be red, or, simply make the text white.

share|improve this answer
    
Neat tool, it links to a standard (WCAG) which is at least something to present to management. –  CmdrTallen Jan 27 at 19:58

Have you tried out some iconography it draw attention to the error instead of coloring the region? You could use a light colored box (like the red one you have) with black text. That would be very easy to read and the light background would jump out against the background. Then use an icon like this in the box as the eye-grabber.

enter image description here

I threw together a quick example below - I don't think I'd use white, but that's what the background of the sample image I found was - probably more like a light grey or something:

enter image description here

share|improve this answer

Any high contrast color would work based on your image. It does not have to be red or a form of red/pink. A yellow, orange, lighter blue, violet, etc would all work. The only thing I would do is avoid green to stay away from a "success" impression. You can easily taylor the alert to match any existing color scheme you may be using.

The key is to simply keep contrast high.

color

Obviously red works as well, but you need to retain the contrast between the red background and the text as well. Red text on a red background is simply not high enough in contrast.

red

share|improve this answer

That red font colour is killing it, try making it lighter (perhaps white, your alert background is already red enough).

share|improve this answer

A good general method I follow is to always use black or white text. I simply add up each of the RGB components and average them, and then make the decision of white or black based on which side of 127 they lie.

#9C2B2E to decimal is RGB(156, 43, 46)

(156 + 43 + 46)/3 ~= 81.67

81.66 is closer to 0 than it is to 255, thus I would put white text in this particular example.

share|improve this answer

Your Answer

 
discard

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.