[material-ui][Switch] Failing on color contrast checks

[chris-gds]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-switch/

Steps:

1. Visit page.
2. Check colour contrast.

Current behavior 😯

All of the switches fail colour contrast checks in some way.

Switch demo	Switch demo	Switch demo	Switch demo

Expected behavior 🤔

I would expect all of the switch Designs to pass colour contrast AA checks.

Context 🔦

Users that blind or visually impaired impacted - switches do not have the correct contrast.

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[juperameza]

Hi, is this issue being work on ?? I'll be happy to contribute. I checked on my own computer and it passes the guidelines but I'm using dark mode. I can check for some middle ground where it passes on dark and light mode

[mj12albert]

We'd have to modify the styles in the component itself as we don't want to add additional styles to Material UI demos

@danilo-leal Is that ok (not really a breaking change?) if the adjustments are small?

[mj12albert]

@juperameza Thanks for your interest, let's wait for Danilo to confirm how to do this one first ~

I can check for some middle ground where it passes on dark and light mode

BTW it may not be necessary to find middle ground, it's ok to use different values for each color mode if overall it's better, e.g. here 😬

[zanivan]

Hey there! Allow me to chime in for a bit 😉

Is that ok (not really a breaking change?) if the adjustments are small?

IMO, as long as we keep using the current Material UI tokens or styles for tiny adjustments, it shouldn’t be a breaking change.

---

About the issue, though, I wonder if this is really necessary. By the WCAG guidelines, the visual of components should have an AA contrast ratio, it means at least 3:1 against adjacent colors.

However, in this component we don't rely only on color to distinguish the states, since the thumb surpasses the track, and we also have a box-shadow and some micro interactions.

That said, I think the default switch has room for improvement. Maybe working on the box-shadow a bit, so it would present a slight contour on the whole thumb? Regardless, I'm open for suggestions and tiny improvements @juperameza

[chris-gds]

About the issue, though, I wonder if this is really necessary.

👋🏼 Can you expand a little?

By the WCAG guidelines, the visual of components should have an AA contrast ratio, it means at least 3:1 against adjacent colors.

From a WCAG POV, I would imagine this does fail, the colours do not have enough contrast. Within Chrome, you can emulate vision deficiencies to give a clearer insight to what a user might experience.

You'll notice if you emulate "reduce contrast", it becomes very hard to see. Should contrast checks pass this would improve. Users with retinal disorders such as age-related macular degeneration (ARMD), amblyopia, lens abnormalities, such as cataract might experience the switch in this way.

Also if you remove colour, the switch state is a little unclear. Which switch is on or off? Which switch is disabled? However this is different topic for a different PR.

Ideally darkening the colours until they pass AA is really quick fix to improve accessibility.

[zanivan]

Nice points @chris-gds, and it indeed makes a lot of sense. However, to achieve this level of contrast, I believe it would be a breaking change, since we would have to increase and change colors too much—besides, it'd be very distant from MD default. Then, I'll do as in #39809 and mark as a breaking change to review and come back to it before the next major.