Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I'm trying to understand the following paragraph in Google's Material Design guidelines:
Other elements, such as icons and dividers, also benefit from having an alpha value of black instead of a solid color, to make sure that they work on backgrounds of any color.
What does this mean? A 00 alpha value would be completely transparent, right?
The alpha value is used in the RGBA colour space to indicate the transparency of a colour. The alpha value goes from 0 to 1 where 0 is completely transparent and 1 not transparent at all.
This allows to do "alpha compositing" which, in lay terms, is the process of placing an image on top of a background and to combine the colours to create the illusion of transparency. For more information on this colour space, you can Google "rgba color space" or visit this Wikipedia page
An RGBA colour is usually denoted with 4 values, 3 for each of the RGB components and a last one for the alpha value (e.g. (0,0,0,0.5)), although in the Colour Style document you have referenced they are denoted with a % value in front of an hexadecimal RGB value (e.g. 50% (#000000)).
An "alpha value of black", at least in the scope of the referenced document, would be a short way to indicate any of the colours in a the RGBA space that have black as their RGB value, (0,0,0). They range from from 100% solid black (0,0,0,1) to completely translucent black (0,0,0,0) passing through all the possible values of transparency.
So, for example a 57% alpha value of black, denoted as 57% (#000000), would be an "alpha value of black" where the alpha is equal to 0.57 meaning it is 57% opaque.
In this image you can see the "alpha values of black" suggested in the Colour Style document. I have placed them on top of white and red so you can see the "alpha compositing" in action.
The full context is as follows:
Use alpha values for grey text, icons, and dividers
To convey a hierarchy of information, you can use different shades for text. The standard alpha value for text on a white background is 87% (#000000). Secondary text, which is lower in the visual hierarchy, should have an alpha value of 54% (#000000). Text hints for users, like those in text fields and labels, have an even lower visual prominence and should have an alpha value of 26% (#000000).
Other elements, such as icons and dividers, also benefit from having an alpha value of black instead of a solid color, to make sure that they work on backgrounds of any color.
Additionally, there are two example images.
The problem is: they appear to be using a novel definition of "alpha value."
Additionally, their quoted hex-rgb values are not correct, and the example percentages are for their illustrated example of white text on a black background (the text says the values are for black text on white).
From what I can tell, they are suggesting that you use a transparency value in addition to your color values when specifying text and rules.
For icons, perhaps they are suggesting you silhouette the item and provide a non-white alpha channel as opposed to a fixed color matte so that you can programatically change the colors without providing new art for every conceivable value.
TLDNR; the section is poorly written and needs copyediting
