A good set of color in for an alert message on dark background

Question

The goal

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

The scenario

This is what I have now:

• 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?

Answer 1

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

Answer 2

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.

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.

Answer 3

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

Answer 4

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:

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.

Answer 5

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.

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:

Answer 6

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

Answer 7

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.