Advertisement


Material design: text color settings


Question

I'm trying to follow Google material design guidelines. I use the same settings for text color but the text is hard to read because in the examples they have an almost white background.
http://www.google.com/design/spec/style/color.html

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

My background color is #efefef and the color of label text is black with 26% opacity so it's hard to read. Do you have any suggestion on how to adjust the color of text (maybe a general rule) so I can use this background.

2014/12/19
1
2
12/19/2014 9:03:00 PM

According to the guidelines, 26% opacity is meant for hint text and disabled text. More prominent labels should be 87% black or 54% black depending on whether they are considered primary or secondary text.

In the guideline you quoted:

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

Note they were referring to "text hints," and said they are supposed to have "even lower visual prominence."

The latest version of the guidelines suggests a tiny bit more opacity for light text on dark backgrounds, but they are otherwise the same:

Hint and disabled text and icons have an opacity of 26% for dark text on light backgrounds, and an opacity of 30% for white text on dark backgrounds.

The current guidelines can be seen at UI color application. (That section is a bit confusing as they list the dark colors using a table that has varying text and background colors that don't actually follow the guidelines.)

2015/09/16
3
9/16/2015 4:41:00 AM