What is the best color for an inactive icon that has red tabbar as navbar?

Question

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

Here's the picture

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%

Is it good enough?

Answer 1

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.

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

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

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

Answer 2

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

Answer 3

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.