Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why there are different oppacities for active and inactive icons in material design?

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%?

like image 618
Misagh Emamverdi Avatar asked May 17 '16 06:05

Misagh Emamverdi


1 Answers

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
like image 99
Eugen Pechanec Avatar answered Oct 16 '22 11:10

Eugen Pechanec