[material-ui][Switch] Failing on color contrast checks
Open
Nobody has claimed this yet.
accessibility
breaking change
scope: switch
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
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:
- Visit page.
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Material UI Switch demos at https://mui.com/material-ui/react-switch/ and reproduce the reported color-contrast failures with an accessibility checker. Identify which switch designs fail the AA contrast checks, then verify that all switch demos pass those checks after the relevant contrast behavior is addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100