Snackbar action styling inconsistent / poor contrast

[thw0rted]

Bug, feature request, or proposal:

Bug (spec violation)

What is the expected behavior?

Under any theme, the snackbar action button should be a color that a) provides readable contrast and b) is different from the body text color. The exact line in the spec is "The text label shouldn’t share the same color as the text button".

What is the current behavior?

With a light theme, the color used is the accent color. Snackbar background is the opposite of the main theme background, i.e. dark background when a light theme is used. Light-theme accent is chosen to provide contrast against a white background, and the primary color -- this does not necessarily mean that it provides adequate contrast against a dark background. This can probably be fixed by selecting a lighter variant of the accent.

With a dark theme, the body text color is used, as far as I can tell. This is a spec violation, as quoted above. The spec doesn't provide an example of action button text in a dark theme (light background snackbar) but presumably you'd want to use a dark version of the accent, for adequate contrast.

What are the steps to reproduce?

Open the docs example for Snackbar and choose a light theme in the top menu bar. Click "show snackbar": the action button text is shown in the accent color. Arguably the two included light themes use an accent that works pretty well on both light and dark backgrounds, but that's not always going to be true. Try it with one of the dark themes, and the action button shows up in dark gray, matching the color of the main snackbar text label.

What is the use-case or motivation for changing an existing behavior?

Spec compliance, accessibility (text contrast)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All, I think?

[thw0rted]

Also, I saw #11426 but I don't think it's related.

[thw0rted]

As an aside, the whole snackbar design kind of throws off the themeing system, because as far as I can tell it's the only case where you're made to use your theme colors over the "wrong" background. This means you can carefully choose shades that contrast well against each other and look good on a light background, call it a light theme, and then it totally falls apart when you use the accent to style a (dark-background) snackbar action. I've been playing with theme rules that lighten/darken the accent but there are still edge cases that work poorly with specific color choices. I'm not sure there's really a good fix for this as long as the spec works the way it does...

[RKaczmarek]

That's what i found. The comment tells you about the reason.

https://github.com/angular/material2/blob/747e45532b8364a39488e0cb35aabd2db630c202/src/lib/snack-bar/_snack-bar-theme.scss#L10-L12

[thw0rted]

I missed this reply, but using primary or secondary is not great, because generally text should be a contrast instead. Palettes are often configured such that either the primary or the secondary might provide poor contrast against the theme background (white or dark-gray, depending). Look at the stock dark themes as referenced in #15672. I'm increasingly sure that all text should avoid both primary and secondary. If you want to draw attention, change the color of the control and use the matching contrast for its text.

[thw0rted]

I was mistaken in my previous comment; clearly, I should have gotten coffee before opening my GitHub notification emails. The linked style applies to the body text of the snackbar. This issue concerns the action button. I also commented that this is an a11y issue but actually it's just spec compliance, because the current solution does not create poor contrast, it only makes a button whose text color does not suggest that it is clickable.

The good news is that the spec has a huge section in it now on dark themes. I'm not sure this was all there last year. Lots of good stuff here, for example your primary should be the "200 tone" (lighter) when used on a dark background but if you have light components -- and a snackbar is actually used as the example in the docs! -- you should use the "700 variant" of it. They do show an example snackbar with light background, and the action button text uses a "high saturation" "primary variant". So, we have a specific spec example of exactly how this should look, which can provide guidance on how to resolve this issue.

[thw0rted]

#15148 was recently auto-locked, but this issue remains relevant. The comments there suggest that light and dark themes should have separate palettes, so that each can use the new text key to specify a text value for good contrast. That doesn't address snackbars, or any other cases where you have a component with a different background color than the default. The requirement to use the opposite theme background for this one component basically means that a theme definition is incomplete without the added information of a "separate inverted theme property", per @benelliott.