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

[chris-gds]

Duplicates

• I have searched the existing issues

Latest version

• 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 😬