32

I've been reading the material design guidelines and it suggests:

For dark text on light backgrounds, apply the following opacity levels:

The most important text has an opacity of 87%.

I'm just curious as to why the primary text wouldn't use 100% opacity in this circumstance, which it does for light text/dark background?

Is there a intended eye health benefit, device display protection, or did the author of this just really like the number 87?

I've tried searching around keywords such as "material primary text opacity" or "material 87% text opacity" etc, but no success thus far...

Improve this question
1

3 Answers 3

Reset to default
26

Just to add as to why the number 87% is used as the starting point.

It has been answered why they didn't want you to use true black and instead lowering the opacity to create shades of gray. So natuarally they would choose these values out of their "Gray" color palette. EDIT: I see there's no references for why not to use true black, here's a UX.SE answer explaining Is there a problem with using black text on white backgrounds? If you scroll through the answers there are a bunch of (not very academic but generally accepted) sources.

Black - #000000 - rgba(0,0,0,1);

87% - rgba(0,0,0,.87) = rgb(33,33,33) = #212121
54% - rgba(0,0,0,.54) = rgb(117,117,117) = #757575
38% - rgba(0,0,0,.38) = rgba(158,158,158) = #9E9E9E

enter image description here

So they started with the darkest text being the darkest gray on their palette, then they picked two suitable lower colors still from their palette. Doesn't explain why they picked those lower colors exactly but explains that the percentages aren't really random.

Improve this answer
4
  • 2
    @Sayse Ah I see there was no real references in the other answers I just sort of skimmed them. I added a link to another UX.SE question about using black on white backgrounds. It's a subject that is surprisingly hard to find legitimate academic sources on but in my experience has always been sort of a given and well known practice not to use true black.
    – DasBeasto
    Mar 1, 2017 at 16:04
  • Yes, thank you, thats perfect. I knew there had to be some logical reasoning here!
    – Sayse
    Mar 1, 2017 at 16:05
  • 4
    Good answer. Additionally, the guideline in Typography - Colors & contrast states: "A text color that is too similar to the background color is hard to read. Text with too much contrast can also be hard to read. This is especially true of light-colored text against dark backgrounds."
    – Alvaro
    Mar 1, 2017 at 18:01
  • 1
    Material's documentation recommends 60% opacity for their "medium emphasis" text color, so the above answer is close but not exact. The Google-unaffiliated Material UI react library does use the above mentioned 54% opacity, but both usages seem to be a misunderstanding of the Material recommendations for theme colors (using the tint and shade system above) versus the recommendations for text colors, which uses the emphasis system. I understand the confusion however, as Google's documentation vacillates from vague and unspecific to byzantine and typo-riddled.
    – rmarti55
    Nov 29, 2018 at 1:30
7

It's a way to enforce a standard use of colour.

Primary/secondary/disabled should always be the same colour, so opacity is used to show the hierarchy.

I've never really thought about it this way, but it's a really neat approach. The designer is no longer guessing at what the appropriate "Second level" colour is for #000000. Is it #ccc? #7a7979? ... don't have to guess anymore. just set opacity.

Improve this answer
3
  • I understand why you'd use opacity as per the section on "Use opacity instead of grey" but that doesn't explain the bizarre starting point
    – Sayse
    Mar 1, 2017 at 15:10
  • 1
    It is certainly a neat approach but I wonder of any unintended consequences, like if your text is rather large/bold and at 38%, if there is a background it would probably show through your text, and a colored background would change the text color pretty drastically. But I suppose you should just consider that while planning
    – DasBeasto
    Mar 1, 2017 at 15:27
  • 1
    @Sayse I had a look at values for WCAG contrast ratios. The "disabled" one (if you're using black and white) doesn't meet the required level of contrast, but the others do. Not sure if that's part of it or not, just a theory.
    – user5482
    Mar 1, 2017 at 18:34
2

On some displays, full black (#000000) could fail to render properly. Setting a small opacity helps to give a sharper and better overall appearance to the text. Even tho this problem is almost gone nowadays, I believe that's the idea behind the .87 opacity on the Material Guidelines.

One of the reasons to use opacity instead of another almost black color is well explained on the previous answer.

Improve this answer
3
  • 4
    This looks exactly like what I was looking for, did you have any reference source to back this up? Like I said on the other answer, I fully understand the use of opacity in material design, just don't (didn't) understand why primary wouldn't use 100% black instead of 87% black
    – Sayse
    Mar 1, 2017 at 15:41
  • 1
    I remember reading something about it somewhere but I don't remember where, it was quite some time ago. I think it was on an article about Material design addressing this exact same question. But I'm just not sure.
    – JimyPP
    Mar 1, 2017 at 15:47
  • 1
    No worries thats fine, it at least gives me something to look into...
    – Sayse
    Mar 1, 2017 at 15:49

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.