How do I indicate success and failure with colour?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

Questions to ask yourself:

• are the 10% achromatic among your target population or would the rate be significantly decreased?

• is it worth adjusting for these special needs or can you maybe assume that achromatics have learned to adapt e.g. by reading text more carefully

• are you sure every shade of red and green is truly indistingushable for achromatics?

Otherwise success can be blue or white, while failure can be orange as well... Use a tick for success and a warning sign for failure in addition.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.