2

I have this problem, where I try to color the inactive icon as gray, but it doesn't seem right.

Here's the picture

enter image description here

How do i solve this problem? what kind of color is suitable for an inactive icon on a red background tabbar?

Edit: I changed the opacity to 40%

enter image description here

Is it good enough?

  • Have you tried to change the opacity of the icon? – user97554 Mar 8 '17 at 3:29
  • I changed the opacity to 40%, and I updated the question. Is it good enough or do I need to do more enhancing? – sinusGob Mar 8 '17 at 3:42
  • 1
    It looks fine now. – user97554 Mar 8 '17 at 3:46
  • 2
    You should run that through a colour contrast analyser - I don't think that would pass even basic accessibility. What other brand colours do you have? Maybe, if red is your brand colour, you should make the icons red and find a different colour for the bar. – Andrew Martin Mar 8 '17 at 8:59
  • I dont think you should disable a button in a bottom bar, could you please tell why are you having this situation? – Alvaro Mar 8 '17 at 10:21
4

So your question is basically How to ensure the contrast of both active and inactive elements while keeping the color harmony?

There are several approaches there:

  • Playing with opacity - the approach you have taken - and while using that, ensure the contrast is sufficient by removing all color, turning the image to grayscale. If you can't see the inactive icons well enough, you need to increase the contrast either by increasing the opacity or making the background darker.

enter image description here

  • Playing with color - for that you need to find a complimentary color to red and white (useful tool: https://color.adobe.com/) and afterwards ensure that the trio has sufficient contrast ratio. Again, you can check that by viewing the image in grayscale or run dedicated contrast diagnostics (useful tool: http://contrastchecker.com/).
  • Playing with weight - this is the option I would recommend in your case, because you are using line icons. It is also widely used in iOS, so if what you are making is an iOS app, it will be a perfect pick.

So how it's done? For icons that have solid outline and transparent fill, you reverse that if an option is active.

enter image description here

And here iOS Phone app example of that behaviour (combined with colors). enter image description here

Of course you can mix the opacity / color / weight of the elements, however two out of three is probably maximum reasonable.

0

You should consider adding a fill or a thicker outline to your active icon. Then you could change the hue of the inactive icons a little bit.

If a user with color blindness or other disabilities will view your app, they won't know which one's active or not.

Here's a great talk about inclusive design from Apple

0

For me, the usual approach is lowering the prominence of these elements by doing either of these:

  • First: reducing the saturation (or completely desaturating, fading into grey, but having in mind that in some cases a confusion between an option being not selected and disabled may appear),
  • Then, if this does not work: reducing the contrast against the background,
  • Alternatively: lowering the shape size or weight (with the latter being a rather extreme solution, and in fact rarely possible).

This way, it does not translate to specific colours. Instead, you follow a simple rule.

If the icon is white, as in your case, there is no possibility to lower the saturation. But the second option, lowering the contrast, is possible (which you already did by making it 40% opaque). A disadvantage here is that this it may also look a little bit like disabled, and not inactive.

Should you consider marking the active element more prominent instead, you could add a marker above, around or beside the active element. Or a background. Or do the opposite with the weight of the active icon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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