6

I need to make a Java component that turns the background a certain colour when a process passed, and another colour when the process failed.

My first thought was: green for success, red for failure.

But then I read that 10% of males can't differentiate between these two colours. What would be a better combination of colours?

(For the nitpickers: yes, I know that colour alone doesn't suffice, that text, shape, and noise can also be used. Nevertheless I am asking about the appropriate use of colour.)

1
  • Please note that color blindness (I'm using a generic term here for sake of brevity) does not necessarily mean that “green and red” can't be distinguished. Other color combinations can be problematic, and well saturated reds and greens can work well too.
    – Agos
    May 28, 2010 at 9:34

10 Answers 10

13

alt text Red + x = Failure

alt text Green + checkmark = Success

2
  • 3
    Do note that in some cultures, the meaning of the cross and checkmark can be reversed. May 13, 2009 at 17:25
  • 2
    Plus adding text indicating success, and the failure should indicate why it failed.
    – MrChrister
    May 13, 2009 at 17:27
9

I think you've answered this yourself. Use green/red in addition to text. Most people will understand green/red. If you change it to blue/yellow, the 90% who see green/red will be confused. Stick w/ the convention and add text to help the 10% who can't see green/red.

6

Remember that these "obvious" color associations (green=good, red=bad) are culturally variant. Thus, not relying on only the color is a very good idea.

1
  • 5
    From msdn.microsoft.com/en-us/library/… : "the interpretation of red, yellow, and green for status is consistent globally. This is due to the UNESCO Vienna Convention on Road Signs and Signals, which defines the worldwide convention for traffic lights (where red means stop, green means proceed, and yellow means proceed with caution)" May 27, 2010 at 23:54
4

Use color and sign. Green with a "+" and Red with a "-", This way people that can't see color will understand.

If it's background color of grid line, to solve the problem, add a column called "State" and use an Icon + or -.

2

In my opinion the best way to go about this is to use a mix of colour and icon/text.

For example, when I have errors on my form I do the following:

  • Provide a text header on the top of the form stating something ala: "Oops, there was some issues with your submissions: Last name was not filled in, etc.."

  • On each error field, I highlight the background of the box pink and modify the border. Not only does it change the colour, it also puts a subtle, but noticeable focus on the error field.

  • Finally, depending on the site and amount of space I have I append a little "warning" icon with a small message after that field.

With all those 3 combined, the error form is easy to read and hard to miss what's going on for all people.

2

As a person with Red/Green colorblindness, I can easily tell the difference between the two colors in their "pure" form. The issue is that red tends to look "washed out" -- more of a brown and greens/yellows merge together. Of the 8% of males who are colorblind, I do believe that very few are completely unable to differentiate between pure Red and pure Green. The issue is that the exact color of the sweater I'm wearing or the Autumn leaves can be difficult and confusing. In addition, I DO have a hard time with any LEDs and particularly traffic lights; they can be confusing mainly because I've become more tied to the relative brightness than the hue and some signals vary dramatically in brightness.

0

Maybe a visual representation of a traffic light? In a neutral state, all three lights are greyed out, although still discernible by colour. In a "green" state, the green light is brighter, and the contrast between the background and the light is increased. Same for the red-light state.

I have to admit that

  1. I don't know if the red-amber-green configuration of UK traffic lights is a worldwide standard that would not be open to interpretation, and
  2. Whether the contrast between the light on and light off states would be enough for a visually impaired user to differentiate between them.

Just an idea...

0

We generally implement it like this:

We have written 2 common functions in which we format the string with {0} for error fmsg and green for success.

So instead of using 2 different labels for error (red) and success (green) msgs you can use one single label and control the msgs and their type (success and error) on server side code itself.

But since , ppl for color blindness : use images X for error with the same above way to implement or even orange for error and blue for success is also a good option.

0

Don't use pure red and green. On safety devices such as traffic lights, the red is actually a red and orange mixture. If I remember correctly the green is also mixed with a little yellow.

It still would be a good idea to use a secondary method to indicate success/failure in addition to color. This can be text, a symbol, or something that attracts attention such as have the red failure back ground be an alternating color that flashes instead of being static. For example alternating the red with yellow.

0

To be honest, shape/position is almost always a more important solution than colour. There are aspects to colour, such as the human eye's insensitivity to blue, that mean that colour's an aid to clarity, and you can't neccessarily rely on it to be appropriate.

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.