Icon coloring for color blindness

Question

I have scenario where there are 2 icons(Check and Exclamation) with 4 states.The colors of the icons changes on following scenarios

• State 1 - ! - Grey (Configuration is missing,has content)
• State 2 - ! - Blue (Configuration is made,has content)
• State 3 - Check - Grey (Configuration is missing,has content)
• State 4 - Check - Green (Configuration is made,has content)

But when it comes to color blinded people, changing of colors in icons is not noticeable as green turns to grey for them. How this issue can be handled, any suggestions or science behind to handle this issue.

Answer 1

"Green turns to grey" is not strictly true - For Deuteranopes (the most common form of colour blindness) green turns to a sort of murky brown colour that would be distinguishable from grey. You can check this for yourself with one of the many browser plugins that re-colour pages as colourblind users would see them. This effectively solves the problem of distinguishing the grey state from the green state.

However it is not good practice to use colour alone to distinguish differing states of any given object.

In your examples it would appear that you have an incomplete sate ('Configuration missing, has content') and a complete state ('Configuration made, has content'). I don't think it would a great stretch of the imagination to present the icons in a triangular 'warning' shape for those that are incomplete and a circular 'whole' shape for those that are complete - or some other shape based configuration of your choosing.

Of course, what ever you do, you also need to include some sort of alt value stating the purpose of the icons for those user who cannot see them at all.

Answer 2

I made some simulations with ColorOracle:

It looks like it works just fine for red-green colorblindness (deuteronopia and protanopia) but those with blue-green issues (tritanopia) will have a hard time seeing things.

And that's something you can't quite fix with a slight palette adjustment. You'd have to move the green all the way over to yellow, or you make the blue in to purple:

Answer 3

The best way to know if your color combination is right for people with color blindness is to convert the image to gray scale.

Of course, most people with color blindness will see color. But depending on the type of colorblindness, it's hard to find a combination that will work.

Guidlines for using color

1. Distinguish colors by saturation and brightness, as well as hue.
2. Use distinctive colors.
3. Avoid color pairs that color-blind people cannot distinguish. (see bottom part of this answer)
4. Use color redundantly with other cues.
5. Separate strong opponent colors.

I can elaborate these points if you want. Source: "Designing with the mind in mind", Jeff Johnson.

These points not only optimize color usage for colorblind people, but it also helps every other visitor to distinguish colors more quickly.

Different types of colorblindness:

I rendered your example through a colorblindness generator.

Deuteranopia (a.k.a. Red-Green colorblindness) - Most common:

Blue Cone Monochromacy:

Achromatopsia / Monochromacy:

Green-Blind/Deuteranopia:

Red-Weak/Protanomaly:

Blue-Weak/Tritanomaly:

Blue-Blind/Tritanopia:

Source: http://www.color-blindness.com/coblis-color-blindness-simulator/

Conclusion

In most cases, you're okay. But to be more clear, I would focus on saturation and brightness to show the difference better. Also, as Andrew Martin already said, don't only use colors to display a difference.