search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
8.93k stars 840 forks source link

switch: checkmark icon has inaccessible color in some generated dark themes #5197

Open vdegenne opened 7 months ago

vdegenne commented 7 months ago

What is affected?

Component

Description

In dark mode and when theme color is too bright, the "selected" icon (when using icons on md-switch) will turn black making it hard to see while on dark color mode.

https://github.com/material-components/material-web/assets/2827383/0a334fb2-4b0e-4de8-80db-e5055a10e774

Reproduction

https://lit.dev/playground/#gist=9a466ce5a9dd7d7ca6900c0240e4d30b

Workaround

No workaround found.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

@material/web v1.0.1

Browser/OS/Node environment

Every brower/os.

asyncLiz commented 7 months ago

Interesting! I don't think this is a bug with our components, but one with tokens or color generation itself.

The a11y gap may be that the on-primary/on-primary-container combo is not guaranteed to be accessible. If that's the case, then our designers need to pick a different token for the icon color that will be accessible against a on-primary background.

Otherwise, it could be that the combo should be accessible, in which case its a bug in our color generation algorithms.

I'll raise this up internally and report back!