[accessibility] Improve High Contrast Mode styles for some components

[silviuaavram]

• I have followed (at least) the PR section of the contributing guide.

Fixes #13174

Improves support for Dark High Contrast for our Inputs components. We should continue this effort with:

• Light High Contrast
• Focus / Hover improved support in both Dark and Light High Contrast
• The rest of the components, not just Inputs

For disabled, use GrayText for border, placeholder and text.
For error, use mark for border and text.
For selected, use Highlight for border, HighlightText for text, and none for forcedColorAdjust.
When both error and disabled are true, disabled wins, since there's no point in showing an error control if we can't do anything about it.
Some docs examples needed style changes since they did not support high contrast.
Slider received transparent border so it will become visible in HC.

Use Case	Before	After
Disabled Checkbox
Disabled Radio
Input Placeholder
Disabled Inputs
Error Inputs
Autocomplete Disabled Options
Rating Radio Example (Dark Mode + High Contrast)
Customized Radio Example
Error Radio Example
Disabled Select
Selected Menu Item (works also with Select and Autocomplete)
Slider
Disabled Slider
Toggle Button Selected
Toggle Button Selected + Hovered

[mui-bot]

Netlify deploy preview

https://deploy-preview-48271--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+1.01KB(+0.20%)	🔺+162B(+0.11%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 15b8229

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+2.57KB(+0.51%)	🔺+400B(+0.27%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48271--material-ui.netlify.app/

---

Check out the code infra dashboard for more information about this PR.

[Copilot]

Pull request overview

Improves Windows High Contrast Mode (@media (forced-colors: active)) styling across multiple Material UI components to make selected/disabled/error states more distinguishable, addressing #13174.

Changes:

• Add forced-colors-specific colors/borders for selected and disabled states (e.g., ToggleButton, MenuItem, Autocomplete options, selection controls).
• Improve forced-colors rendering for form inputs (placeholder opacity, disabled/error underline/outline contrast).
• Update a few docs demos to better reflect theme vars usage and forced-colors behavior.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/mui-material/src/ToggleButton/ToggleButton.js	Adds forced-colors selected/hover styling using system colors.
packages/mui-material/src/Switch/Switch.js	Adds disabled forced-colors borders for track/thumb.
packages/mui-material/src/Slider/Slider.js	Adds borders and disabled forced-colors border color for track/thumb.
packages/mui-material/src/Radio/Radio.js	Tweaks disabled color for forced-colors.
packages/mui-material/src/OutlinedInput/OutlinedInput.js	Adjusts error/disabled outline and placeholder/disabled text in forced-colors.
packages/mui-material/src/NativeSelect/NativeSelectInput.js	Improves disabled icon visibility in forced-colors.
packages/mui-material/src/MenuItem/MenuItem.js	Improves selected/hover selected visibility in forced-colors.
packages/mui-material/src/Input/Input.js	Improves error/disabled underline and placeholder visibility in forced-colors.
packages/mui-material/src/FormLabel/FormLabel.js	Improves error/disabled label text in forced-colors.
packages/mui-material/src/FormHelperText/FormHelperText.js	Improves error/disabled helper text in forced-colors.
packages/mui-material/src/FormControlLabel/FormControlLabel.js	Improves disabled label text in forced-colors.
packages/mui-material/src/FilledInput/FilledInput.js	Improves error/disabled underline and placeholder visibility in forced-colors.
packages/mui-material/src/Checkbox/Checkbox.js	Tweaks disabled color for forced-colors.
packages/mui-material/src/Autocomplete/Autocomplete.js	Improves selected/disabled option visibility in forced-colors.
docs/data/material/components/rating/RadioGroupRating.tsx	Uses `(theme.vars
docs/data/material/components/rating/RadioGroupRating.js	Uses `(theme.vars
docs/data/material/components/radio-buttons/ErrorRadios.tsx	Simplifies change handler typing; modifies helper text behavior.
docs/data/material/components/radio-buttons/ErrorRadios.js	Modifies helper text behavior on change.
docs/data/material/components/radio-buttons/CustomizedRadios.tsx	Adds forced-colors outlines for custom radio styling.
docs/data/material/components/radio-buttons/CustomizedRadios.js	Adds forced-colors outlines for custom radio styling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[siriwatknp]

I agree with the improvement but have you consider a different path like providing it as a theme enhancement and let users choose to include to their app?

The benefits:

• no bundle size changes, win-win for users
• user owns the code, adjust the colors they want
• less maintenance burden on our side

The usage is something like:

const highContrastEnhancement = … // copy from our source.

createTheme({ … }, highContrastEnhancement)

cc @mnajdova

[oliviertassinari]

Could we assign a bundle size/performance budget to this, and work under it?
To also look at the customization DX implications.

At the end of the day, is this something people want? I don't recall seeing user traction, so probably something we should stick to a best effort (improve what we can without harming the majority of the developers and end-users).

[mnajdova]

Agree on this needing to be an opt in - likely a theme on top of Material UI like @siriwatknp suggested. With this:

• it won't mess up any overrides that teams may have already done on the topic
• it wouldn't add any bandle size by default for teams not needing this
• it would make customizing it a bit better - by providing the colors we most commonly use for this mode of the components
• we could promote it as a new feature - this is a bonus

[silviuaavram]

Splitting the changes into #48319 and #48320. Closing the PR