10

Description

The color palette for Material Design specifies hues as well as suitable colored (white/black) text to be used for each backing-hue. So for example in the Red palette there are 10 'primary' (numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) and 4 'accent' hues (numbered A100, A200, A400, A700). The Material Design specs recommend white text for hues 400-900 and A200-A700.

However, when using a contrast checker (or when running the contrast ratio calculations myself) I see that hues 400-600 and A200-A400 actually have higher contrast with black than white.

For hue 500 (which is important as it's the default primary hue in material design) the hex is #f44336. Contrast with white is 3.68:1 while contrast with black is 5.7:1.

I've read before (in other attempts to reverse-engineer the hue-selection process for material design) that Google is obviously not taking an algorithmic approach to color selection, instead (presumably) relying on hand picked colors by experienced designers.

Main Question

Is there any resource explaining why these particular text colors were chosen for these particular hues? Alternatively, is there a different contrast calculation or color selection algorithm I could use to closely approximate the material design text-color selection?

Further Tests

Something else I just tried is to use color brightness and color difference (also defined in contrast ratio), which more closely approximates what google is doing, at least for the red hues, but still differs slightly.

For the 500 hue (#f44336), color brightness is 0.4644745 which would favour white. Color difference is 1.568627 to white, and 1.4313725 to black.

For the 400 hue (#ef5350), color brightness is 0.507066 which would favour black slightly. Color difference is 1.423529 to white and 1.57647 to black.

Improve this question
4
  • 4
    Contrast is very important, but style decisions are important as well. as long as your style compromises aren't affecting usability in a clearly negative way, there's no problem. And if they also improve UI, they have to be preferred. Otherwise, eveyrthing would be black and white, or some (perhaps) horrible color combination that technically has more contrast but your users will puke just by seeing them
    – Devin
    Nov 6, 2016 at 23:26
  • That's basically an argument for "no, they didn't have a repeatable selection process", but it sounds like opinion. Do you have any reason to believe that 'style and preference' were the reasonings behind the selection I mentioned in the question?
    – Ng Oon-Ee
    Nov 15, 2016 at 9:43
  • 1
    It's an opinion based in 20 years of experience and a deep knowledge of theory of color . Also, that combination has psychological load. By your name, I assume you're from South Asia so what I'm saying might not hold true, but in Western cultures, black font on red (or red on black) is usually associated with violence, crime, terror movies, and so on. But as you say, this is an opinion, and therefore I'm not making it an answer, just a comment. Bottom line is: style will always prevail over theoretical correctness whenever needed, based on other disciplines
    – Devin
    Nov 15, 2016 at 15:10
  • I understand the cultural implications of red (rather, certain deeper shades of red), western cultures have spread everywhere including my little corner of the world, but I was figuring that the design spec would be based on something a bit more... repeatable, I guess.
    – Ng Oon-Ee
    Nov 15, 2016 at 23:53

2 Answers 2

Reset to default
1

Material design in the accesibility section states:

The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

However, as you noticed, the values from the color palettes suggested don't follow that contrast ratio. My guess: "The W3C recommends".

In the color section states:

Dark text on light backgrounds

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

  • The most important text has an opacity of 87%.
  • Secondary text, which is lower in the visual hierarchy, has an opacity of 54%.
  • Text hints (like those in text fields and labels) and disabled text have even lower visual prominence with an opacity of 38%.

White text on dark backgrounds

The table values relay relative levels of importance for white text on dark backgrounds.

White text appearing on colored backgrounds should do so at an opacity of 100%.

However, in the color palettes suggested all dark text is rgba(0,0,0,0.87) (black with opacity of 87%) and there is #fff text color as well as rgba(255,255,255,0.87) (white with opacity of 87%). I couldn't figure out how is each white value chosen.

About your question.

I checked all the color palettes with Lab color space, where the L represents a lightness value between 0 (black) and 100 (white).

I came to this conclusion:

  • When the background color has a Lightness value of 62-100 the text color is dark.

  • When the Lightness value is 0-62 the text color is light.

So the limit value is somewhere around 62, where in some cases the dark value is applied and in some the light. There are some exceptions where the value is 61 but the dark text is applied.

This is not an exact rule, but it might get you closer to decide which text color to use.

In the images the middle number is the Lightness value of the background color.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

Improve this answer
1
  • Thanks, I'll play around with the L value, but it seems you've covered everything! A pity there's the 61/60 non-match as this seems 90+% accurate, and certainly better than the measures I've been using.
    – Ng Oon-Ee
    Nov 21, 2016 at 2:49
0

The colors in material design are choosen for vibrancy (check 2nd principle), aiming to bring physical print colors to digital life thus resulting in a better experience(visually pleasing), most probably!

And, as far as contrast is concerned, you have to choose text color such that the contrast is optimum (not necessarily maximum) and to add, you can obviously tone done contrast a bit more for icons if you prefer...

Improve this answer
6
  • Hi, thanks for the link, but I think it refers to the selection of the color palettes themselves, not how the decision for black/white of text on specific hues was done.
    – Ng Oon-Ee
    Nov 15, 2016 at 9:42
  • They have suggested text colors as Black and white (for light and ldark backgrounds), while giving given opacity to represent various states and clearly this is independent of color palette/background else they might have to choose different text colors for different background which would be ... well really complex!
    – Harshit Choudhary
    Nov 15, 2016 at 9:48
  • 1
    But my question was how, specifically, black or white was chosen for individual hues.
    – Ng Oon-Ee
    Nov 15, 2016 at 10:05
  • Then question would be why text colors are usually black and white, right? Think material is just following that same unsaid standard here...
    – Harshit Choudhary
    Nov 15, 2016 at 10:19
  • No, it's much more specific than that. Please re-read the question, in particular the specific hues I've mentioned. In summary, the Red palette (for example) has over a dozen hues, and the darker ones use white text, the lighter ones use black text. I'm asking how the Material design spec has chosen which hues exactly would use white and which would use black, and shown that contrast and/or color brightness do not fully explain it.
    – Ng Oon-Ee
    Nov 15, 2016 at 23:52

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.