We have a repository of old icons which are flat,gradient,simple,compound icons for win32 and win64 applications(basically legacy software icons). Currently we are trying to do color accessibility for this,so these icons are accessible for visually impaired people.(luminosity and Color blindness)

How can we take this process? What tools we can use to analyze this? How to do the testing of the icon?

I tried Contrast color analyzer tool for luminosity and color blindness, most of icons I tested failed in the process,since the tool asking only for background and foreground color(Ex:Close icon in a red gradient circle,in this case foreground will be reddish orange and red,and background will be white, Most of the results are failing). How do we perform this testing and conclude and suggest icon color accessibility?

Please suggest us.

Attaching icon:enter image description here

Thanks, Nithin

  • If the icon of your example is failing in all the gradient (from red to orange) lighten up all the gradient, if only one of the extremes then lighten up that one, is this what you are doing right now?
    – Alvaro
    Feb 13, 2017 at 11:14
  • Are we talking about contrast between the icon and its background or contrast within the icon itself?
    – Matt Obee
    Feb 13, 2017 at 11:17
  • @Alvaro: Yes i tried doing that, however if its orange its showing its failing, if i change the rgb value its only right until i make it pure red. How do i handle gradient icons ? Feb 13, 2017 at 11:31
  • @MattObee I need both, if its a flat icon its easy for me to check the color contrast between icon and background. However if i have gradient icon i am facing this problem. Feb 13, 2017 at 11:32
  • And guys, Is this the right approach to test the icon color accessibility? Feb 13, 2017 at 11:32

1 Answer 1


My suggestion is go for flat icons and use color with purpose. From a user experience perspective, in my opinion, color should be used in certain elements to give attention rather than to represent physical aspects of the element (or other kind of connotations).

If you use icons that have gradients and colors my suggestion to check visually if things have enough contrast or not, is to convert everything to black and white.

enter image description here

To test in a contrast tool, then a possibility, which I am not sure how accurate it is, is to apply an average blur filter to the color to obtain the mid color. Then use that color in the contrast tool and see if it needs more lightness or not.

enter image description here

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.