#36676·fluentui

[Bug]: Web Components Switch indicator is not visible in forced colors

Author: dustybrownCreated Sep 1, 2026Updated Sep 11, 2026
LabelsType: Bug :bug:web-componentsFluent UI WC (v3)

Component

Switch

Package version

3.1.2

@microsoft/fast-element version

the latest

Environment

bash
Go to the Fluent Web Components Switch Storybook: 3.1.2 as of this bug creation.
|https://storybooks.fluentui.dev/web-components/?path=/docs/components-switch--docs&globals=theme:web-dark

Current Behavior

When using the Fluent Web Components fluent-switch Windows forced colors enabled, the switch indicator/thumb is rendered black or white depending if light or dark mode.

The indicator should use a forced-colors system color that maintains contrast, such as CanvasText, ButtonText.

Expected Behavior

The switch indicator should remain clearly visible when forced-colors: active is enabled, regardless of whether the application is using the light or dark Fluent theme.

Reproduction

The switch indicator/thumb renders black against a black background, causing it to visually disappear.

Steps to reproduce

Image
  1. Open the Fluent Web Components Switch Storybook: Components / Switch - Docs
  2. Make sure the Storybook theme is set to Web Dark.
  3. Open browser DevTools.
  4. Open More tools > Rendering.
  5. Set Emulate CSS media feature forced-colors to active.
  6. Alternatively, enable a Windows High Contrast theme.
  7. Review the fluent-switch component.
  8. Observe the switch indicator/thumb.

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

NXT

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.