8

I am really wondering why there are different oppacities for active and inactive icons in here:

enter image description here And here:

enter image description here So I am confused in these two cases:

1- An inactive dark icon on a light background should have opacity 26% or 38%?

2- An inactive light icon on a dark background should have opacity 30% or 50%?

Community
  • 1
  • 1
Misagh Emamverdi
  • 3,654
  • 5
  • 33
  • 57
  • If you dive deeper into Google Material Design Guidelines you can find much more inconsistencies there. I'd recommend you to just stick with one choice for all your material apps :) – Anton Tarasov May 18 '16 at 04:28

1 Answers1

4

why there are different oppacities for active and inactive icons

Because Material Design evolves and specs are updated inconsistently.

So I am confused in these two cases

Since IMO this is more a topic of color than of icons and because I don't remember seeing the tables in second link, I'd say the second link is more up-to-date and stick to it.

Design library's design_tint_password_toggle.xml uses 54% and 38% which also suggests the second link is "correct".

For further reference as of 2016-11-09 these "correct" values are:

  • Dark theme
    • Active: 100% white icon on dark background
    • Inactive: 50% white icon on dark background
  • Light theme
    • Active: 54% black icon on light background
    • Inactive: 38% black icon on light background
Eugen Pechanec
  • 37,669
  • 7
  • 103
  • 124