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 form components. One of them is pink/red.

    Here the image and the error message:

    Enter image description here

    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 select components.

    Some options, inspired by your answers:

    form-errors

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

    You don't want to know how much money this designs cost....

    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.

    @Baumann That sounds like a good idea as well

    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?

    XY problem? I don't get it

    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.

    You can also change the font to italics to draw more attention to the text.

    Do you have any example?

  • ke11en

    ke11en Correct answer

    5 years ago

    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. enter image description here

    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.

    @AlgyTaylor I'd go with white. I made quick samples: Black border - White border

    @ardaozkal I like your quick samples; I just feel bad that my paint skills aren't up to the same level as yours :(

    @MonkeyZeus no worries, I suck on paint too. That is photoshop you see there.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM