What color for error messages for a form with a red background?
I have a big website with some forms. There are four background-colours for the
formcomponents. One of them is pink/red.
Here the image and the error message:
I can't change the form background-color, but I'm free to change the message style (background-color, text-color, etc.).
What do you think? I don't like it the red with white text. The error message is not very visible, because the background is red. I've been trying for a few days with other red styles, and some oranges, but it looks weird.
Blue or green backgrounds are really visibles, but it could be confusing. (success = green, error = red)
How can I improve this form?
I mean, I should change the error message and don't touch the
Some options, inspired by your answers:
- 1 is current.
- 2 looks nice
- 3 weird
- 4 (darker) and 5 (lighter), similar, but the shadow is different
Thanks you all for the feedback!!
Why can you not change the form background? Its a bit harsh on the eyes. Anyways a white background message with red text/warning icon could work.
Well that's a **main** color from some type of product. Colour can't be changed as I said before. Anyway this colour is not the background color of the whole website. It has a lot of white or some images.
#2 - It's your best bet, Your already way off with that background, at least #2 is readable, and the yellow draws attention. There's no rule that errors have to be red, they just usually are cause it really stands out. In this case yellow stands out.
Seré infantil, pero un poco me saca una sonrisa ver software en español por acá
Just use red on red. Users ignore error messages anyway, might as well make it easier for them to do so.
I would've gone for a white border around a red background. That was the first thing that popped up
I know you've already accepted an answer but I recommend this slight modification. **Suggested improvment**
I like it, but I think it would be better if the red box was instead a exclamation sign.
Number two works. Yellow and black is nature's warning signal (wasps!). Also used by humans for marking hazards and many road signs. Red on bright pink gets lost. Bright pink background is bad UI but if you can't change it, you have to work around it.
I smell a XY problem. You really don't want a red background. Can you give the error a white border?
Re "that's a main color for some type of product"-- T-Mobile has famously trademarked the color magenta and uses it in all of their branding, but their website is nevertheless nice-looking and uses a grey background. (I realize you didn't make the decision on the background and it can't be changed, I'm just saying that there's really not much of an excuse for the choice.)
As I can see, magenta is a colour used, but it has a clean white background. Not my case.
I'd go with a color that'll always retain stark contrast. I'd also avoid venturing too far outside of the styles that that users are generally familiar with. Because you're working in an atypical style, if you deviate and use unfamiliar elements you may risk confusing a percentage of your users. Here's what i think i'd recommend.
Thanks, that's the solution i'm working atm. Some red mark and a white/black message bgcolor. A set of solutions by your answers. I'm going to study this, because it's really a pain in the *ss.
Maybe a black border round the whole box too, so that the red stripe stands out a bit more ... agree that it's best to stick with standard colours and try to find a solution using those ... must be an absolute nightmare with that background, though.
@ardaozkal I like your quick samples; I just feel bad that my paint skills aren't up to the same level as yours :(