Allow palettes to specify a separate hue for uncontained text

[benelliott]

Please describe the feature you would like to request.

There is a lot of emphasis on making sure that you choose accessible text colors to ensure readability when your palette color is used in the background but there is no such concern when your palette color itself is used as the text color on a neutral background. This is exacerbated by the fact that @angular/material components will implicitly use the default hue of the palette when selecting this text color - for example in _form-field_theme.scss:

$focused-label-color: mat-color($primary);

it's very hard to pick a palette whose primary is effective both as a strong background color and as a strong text color for small text on a neutral background and conforms to any existing brand guidelines.

One way to fix this would be to extend mat-palette with a fourth argument, $text. For compatibility it could default to $default if not specified, but this would allow you to use a much darker hue on form field labels and so on without making primary backgrounds darker everywhere else.

You can quite easily see the accessibility issues with the current system with some of the prepackaged themes. For instance setting the theme to purple-green on https://material.angular.io/components/form-field/examples gives a contrast ratio of 2.09 for the form field inputs.

What is the use-case or motivation for this proposal?

Improves accessibility

Is there anything else we should know?

No

[thw0rted]

I've been looking at a few issues (#13905, #15672) with colored text in dark themes. Defaulting the text value to 500 means that when a theme color (primary/accent) is used for text it will have poor contrast on dark backgrounds. Ideally you could have the text be a light tone (50/100/200) for dark themes and a dark tone (600/700) on a light theme, but of course when you're constructing a mat-palette you don't know what mat-*-theme function it will be passed to.

I know the PR is already merged, but I have an alternate proposal. In all the places where the text key is referenced (*-theme.scss), instead of e.g. _mat-button-theme-property($theme, 'color', text);, you could write _mat-button-theme-property($theme, 'color', if($is-dark-theme, lighter, darker));. This relies on existing light/dark variants while providing accessible contrast on both types of background. Of course it gives less control than an explicit text value. I'm not a Sass master but maybe there's a way to have no default value for text and fall back to lighter/darker in context when consuming it (i.e. in the individual -theme files)?

If you don't agree with this change, we're going to either need a fifth hue, for separate light-text and dark-text, or at least we'd need to update theme creation documentation to state that mat-palette always creates palettes that are not suitable for use with mat-dark-theme unless you specify a text, which doesn't seem very developer-friendly.

[thw0rted]

Oh, and I guess cc @benelliott and @josephperrott

[benelliott]

@thw0rted The problem with not defaulting to 500 is that it will be a huge breaking change that invalidates a lot of screenshot diffs for apps inside Google (I know because I accidentally did it with this PR initially 😄). AFAIK because of how Angular is deployed inside Google it would then be the Material team's responsibility to go in and "fix" each of these independently.

Moving forward though I definitely agree - this PR goes some way to helping the situation but it's quite easy to find situations where it still falls down. I think this will always be true however just due to the sheer number of text/background colour combinations you can end up with even within the theming engine.