Switch component is not visible while using a Windows High Contrast desktop theme

[williamjstanton]

🐛 Bug Report

The Switch component is not visible or barely visible in Windows High Contrast Mode (WHCM) because its appearance depends on CSS background-color. High contrast themes remove or override background colors for accessibility, so the switch track and thumb lose their visual distinction and the control can appear invisible or indistinguishable from the page.

To Reproduce

1. Open an app or Storybook that renders the Canvas Kit Switch component.
2. On Windows, enable a High Contrast theme: Settings → Accessibility → Contrast themes (or Settings → Ease of Access → High contrast on older Windows), then choose a theme (e.g. "High Contrast Add .travis.yml #1").
3. Or use the High Contrast mode in browser DevTools (e.g. Chrome: Rendering → Emulate CSS media feature prefers-contrast or forced-colors).
4. Observe the Switch in both unchecked and checked states.

Expected Behavior

The Switch should remain clearly visible and understandable in High Contrast Mode. Users should be able to see:

• The track (background) of the switch.
• The thumb (circle) and its position (on vs off).
• Focus and error/caution states.

This can be achieved by using techniques that work when backgrounds are stripped, such as visible borders, outlines, or forced-colors / prefers-contrast media queries, while still respecting the user’s high contrast theme.

Actual Results

In Windows High Contrast Mode (or when emulating it):

• The track relies on backgroundColor: system.color.bg.muted.soft (and brand.primary.base when checked) and can disappear or blend into the page when backgrounds are overridden.
• The thumb relies on backgroundColor: brand.primary.accent and can also become invisible or indistinguishable.
• The switch may look like an empty area or a single flat color, making it unclear that it’s a control and whether it’s on or off.

Screenshot:

Relevant code: the track and thumb are styled in modules/react/switch/lib/Switch.tsx (e.g. switchBackgroundStencil and switchCircleStencil) using backgroundColor for the main visual states.

Browser (if applicable)

Reproducible in any browser on Windows when a system High Contrast theme is active. Can also be verified by emulating forced-colors: active or prefers-contrast: high in Chrome/Edge DevTools.

Link to repl or repo (highly encouraged)

• Component: modules/react/switch/lib/Switch.tsx
• Stories: modules/react/switch/stories/ (e.g. Basic, Disabled, Error)

Suggested direction for a fix

Use high-contrast–friendly styling so the switch remains visible when backgrounds are removed:

• Borders: Add a visible border (e.g. 1–2px solid) on the track and/or thumb so the shape is still clear in WHCM.
• Forced Colors: Use @media (forced-colors: active) (and -ms-high-contrast for older Edge) to set border and, if needed, outline or other properties that are preserved in high contrast, and avoid relying solely on background-color for the main visual distinction.
• System colors (optional): Consider Canvas / ButtonFace or similar for borders in forced-colors mode so the control respects the user’s high contrast palette.

References: MDN – forced-colors, Styling for Windows High Contrast.

[josh-bagwell]

This was completed with PR #3842 .