: A good set of color in for an alert message on dark background 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

@Turnbaugh909

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.

Vote Up Vote Down

@Shakeerah625

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.

Vote Up Vote Down

@Kevin459

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

Vote Up Vote Down

@Turnbaugh909

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

Vote Up Vote Down

@Becky351

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.

Vote Up Vote Down

@Jessie844

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

Vote Up Vote Down