59

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!!

Improve this question
18
  • 6
    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.
    – DasBeasto
    Commented May 19, 2016 at 14:26
  • 13
    #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.
    – coteyr
    Commented May 19, 2016 at 17:17
  • 1
    Seré infantil, pero un poco me saca una sonrisa ver software en español por acá
    – mgarciaisaia
    Commented May 19, 2016 at 17:53
  • 22
    Just use red on red. Users ignore error messages anyway, might as well make it easier for them to do so.
    – SQB
    Commented May 19, 2016 at 18:05
  • 4
    I know you've already accepted an answer but I recommend this slight modification. Suggested improvment
    – MonkeyZeus
    Commented May 20, 2016 at 13:26

9 Answers 9

Reset to default
78

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

Improve this answer
6
  • 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.
    – Baumannzone
    Commented May 19, 2016 at 15:44
  • 5
    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.
    – Algy Taylor
    Commented May 20, 2016 at 9:43
  • 7
    I'd go as far as wrapping the red mark in with the gray.
    – MonkeyZeus
    Commented May 20, 2016 at 13:24
  • 2
    @AlgyTaylor I'd go with white. I made quick samples: Black border - White border
    – ave
    Commented May 21, 2016 at 10:46
  • @ardaozkal I like your quick samples; I just feel bad that my paint skills aren't up to the same level as yours :(
    – MonkeyZeus
    Commented May 23, 2016 at 12:42
69

I would go with something in the shade of the background, but have a more red text in the alert. You can add a border in the shade of the text to make it stand out as an error more, as well.

Picking a lighter shade of the background

Improve this answer
43

A bright yellow background with black text would work well.

Fits the colour scheme of a warning sign.

yellow/black warning image

Improve this answer
4
  • 1
    This implementation looks a bit harsh but I like how the OP has used it.
    – Roux Martin
    Commented May 19, 2016 at 15:28
  • Yes, I like more my yellow example than this one, but inspiration came from here.
    – Baumannzone
    Commented May 19, 2016 at 17:05
  • 5
    @Mayo No, it should be an answer. Comments aren't for answers. Even if it's 1 line, it can always be expanded (as this was, providing an image).
    – Insane
    Commented May 20, 2016 at 9:08
  • 3
    Yellow always strikes me more as a warning rather than error.
    – Sarima
    Commented May 20, 2016 at 9:57
24

The standard color for error messages is red, see this question :

One important point to understand is that using conventional colors for errors is important because they make the errors more noticeable. User being annoyed by the color of error message is lot less of a problem than user not being able to complete the form because they didn't notice the error. At least in most cases.

Since red will be lost in your background, the next best thing is to use yellow with a red error symbol.

The yellow attracts attention and also has a very good contrast with the background. The red error symbol conveys to the user that this is an error message, since this is a well accepted standard symbol.

enter image description here

Improve this answer
1
  • Thanks, that what I said in a comment. Great explanation, I agree with you. Im going to improve the error's styles in the next release of the app.
    – Baumannzone
    Commented May 20, 2016 at 9:17
21

You might try adding a white border, then play with the background color.

The one color that communicates 'something is wrong' louder than red is the color of death, black.

Dark red with white border, black with white border

Improve this answer
1
  • Was going to propose this. The latter (white on black with border) is the best for a classic design, but this feels more modern. Asker should pick between either this or that.
    – ave
    Commented May 21, 2016 at 10:45
16

That's an accessibility nightmare!

Try reversing your error message styles: Red text on a white background.

enter image description here

Improve this answer
9
  • 1
    Hmmm, I'm going to try, but there are a lot of white elements in the form, I think it is going to be confusing
    – Baumannzone
    Commented May 19, 2016 at 14:32
  • a) how many of the other white elements have red text? and b) these new elements will not normally be present but will 'appear' when there is a problem - It's not ideal and by no means perfect but you already have a form that's going to be impossible to read for some people.
    – Roux Martin
    Commented May 19, 2016 at 14:37
  • I got inspired by your idea, I'm going to update my question with a new image.
    – Baumannzone
    Commented May 19, 2016 at 15:01
  • 1
    @Baumann - I improved the image - now it's more inline with your situation
    – Roux Martin
    Commented May 19, 2016 at 15:22
  • 1
    I see, I think it looks nice. I'm thinking in put some danger/warning icon in your solution and maybe some shadow.
    – Baumannzone
    Commented May 19, 2016 at 15:26
10

Building off of several other answers: enter image description here

Never only rely on color. Adding an icon or text or texture not only helps colorblind people, but also makes things a bit easier for regular-seeing people.

Using a dark grey or black bar gives a strong contrast with the background. It's also color neutral so you can put other kinds/colors of notifications in those boxes.

Using an orange or yellow instead of red avoids looking too close to the background. And it still has useful connotation from warning signs.

Improve this answer
3

The question actually provided a lot of the alternate options available, but for clarity I thought it would be good to summarize some of the answers provided:

  • Find a complementary colour to use that will stand out - there are plenty of tools for this, and you can also consult the branding guidelines as a secondary check; this could be for the UI, the font colour or a combination of both.
  • Create a different layer to bring the focus to the user - the best example is the use of shadows to make the message component 'pop' out from the rest of the interface, so creating a 3d effect in a flat design space
  • Customize the message component in a way that creates focus in a different way to the rest of the interface; the example given in the answer with the minimal striping on the left-hand side with black background is a nice implementation of the idea
  • Apply an interaction or behavioural pattern - this one is different from the rest as it is not about visual styling but behavioural or pattern design, so an example would be an animation for the message component that lasts a little bit longer so it is easier to notice, or create a persistent component that the user has to close, etc.
Improve this answer
1
  • Tĥe effort of summarizing all the comments is well worth it.
    – Pierre Arlaud
    Commented May 20, 2016 at 7:54
-1

You could also try a light red background for the alert: enter image description here

Improve this answer
2
  • That's what im doing now. Check my updated image
    – Baumannzone
    Commented May 19, 2016 at 15:19
  • 3
    The background of the error message should be contrast to the background color of screen. Error message should pull user's attention.
    – Aditya Durgude
    Commented May 20, 2016 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.