2

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.

3
  • 2
    I can't make heads nor tails out of that blurb from Google. It doesn't make any sense how they wrote that. As such, I'd choose what looks right to you. Guidelines are just that...guidelines. If you have reason to change them, go ahead.
    – DA01
    Dec 19, 2014 at 22:35
  • 1
    I'm with DA01 on this as well. Make sure there's enough contrast that legibility is not an issue. Then do whatever works well with your design and within the context of its usage.
    – bemdesign
    Dec 20, 2014 at 1:29
  • 1
    Thank you guys, I will just increase the opacity. I think they wrote those guidelines more for developers than for designers.
    – vovahost
    Dec 20, 2014 at 12:43

1 Answer 1

3

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

1
  • "...table that has varying text and background colors that don't actually follow the guidelines". So true. I have been confused with a similar issue with buttons' colours.
    – Sufian
    Sep 16, 2015 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.