MatSelect: poor contrast ratios with some dark mode color palettes

[thw0rted]

What is the expected behavior?

Text colors should be chosen consistently to have good contrast with application background.

What is the current behavior?

The selected option in the dropdown of a mat-select uses the theme's primary color as text color.

What are the steps to reproduce?

Open any (non-customized) select control on the docs page. Change the demo site's themes and observe that the selected item's text color matches the app bar.

For the Blue light theme, it is difficult to tell the primary color (dark blue) from the non-selected items (black). Worse, with the purple dark theme, there is little contrast between the purple primary color and the light gray option-list background.

This contrast calculation shows a contrast ratio of about 1.5; the spec requires compliance with accessibility guidelines including contrast of 4.5.

Is there anything else we should know?

I'm not positive how to best solve this. I went looking for a spec to consult but I can't seem to find any description of a Select component in the current Material documentation, so there's no guidance about what color to "pick" for showing selected state. Ideally you'd always use a text color that's defined as contrast in a palette. Maybe selection state should be conveyed by text weight instead of changing color? As far as I can tell, the mat-select is the only component that uses primary as a text color (instead of a control or block/background color).

You could tell designers to always pick a primary that contrasts well with the theme background (light/dark) but this would pretty severely limit the available colors we can use and invalidates a lot of the popular themes, including some of the default ones.

[thw0rted]

Dang it, I knew this all sounded really familiar, and when I went to add a workaround in my styles I found a comment that pointed me to #13905 . I guess there are two components that use primary color where contrast is supposed to be :-/

[notnarb]

+1

Started writing an issue before finding this one.

Repro: https://stackblitz.com/edit/components-issue-dpd35z

Screenshot showing Chrome doesn't approve of the contrast ratio:

[thw0rted]

On the snackbar issue, I linked to the spec guidance on colors in dark themes. It's very helpful and talks about using primary / accent for text. Basically, you use very light tones (50/100/200) when picking text. It looks like #15149 was recently merged and adds a separate text hue. I commented there about the impact that will have on this issue. In the interim, if nothing changes, you can at least define your palette with an extra argument and it will fix this (though it will also make the snackbar issue worse...)

[thw0rted]

#15148 was just locked by the auto-close bot, but remains relevant here. If there were some way to have palettes default to a high-value hue for text when used in a light-theme context, but a low-value hue for text in a dark-theme context, I think it would very likely resolve this issue, and probably any others like it.

[glushkova91]

The color contrast issue for selected option is reproducible not only for dark theme, but for Blue one as well.
https://webaim.org/resources/contrastchecker/?fcolor=3F51B5&bcolor=EOEOEO
We use teal-700 as primary color (dark green) in our application and we have a11y bug about that.
https://webaim.org/resources/contrastchecker/?fcolor=00796B&bcolor=EOEOEO
Probably background for selected value might be a little bit lighter.