[Bug]: [A11y] TagPicker/TagItem has insufficient color contrast in dark mode and high contrast mode when focused (fails WCAG 2.1 AA)

[NewFuture]

Package

react

Package version

8.125.2

React version

17

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: x64 AMD 
    Memory: 43.11 GB / 63.95 GB
  Browsers:
    Chrome: 143.0.7499.110
    Edge: Chromium (140.0.3485.94)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @fluentui/react: ^8.122.11 => 8.123.5
    @fluentui/react-charting: ^5.23.56 => 5.24.26
    @fluentui/react-components: ^9.66.2 => 9.69.0
    @types/react: ^16.9.49 => 16.14.66
    @types/react-dom: ^16.9.6 => 16.9.25
    react: ^16.13.1 => 16.14.0
    react-dom: ^16.13.1 => 16.14.0

Current Behavior

When using TagPicker in dark mode (prefers-color-scheme: dark) or Windows High Contrast themes, the selected TagItem text has insufficient color contrast against its background when the item receives keyboard focus. The measured luminosity ratio is 4.06:1, which fails the WCAG 2.1 Level AA minimum requirement of 4.5:1 for normal text.

This accessibility issue impacts users with low vision or color vision deficiency who rely on adequate contrast to perceive focused elements.

Mode	Status
Light mode	✅ Pass
Dark mode (prefers-color-scheme: dark)	❌ Fail (4.06:1)
High Contrast	❌ Fail

Desert theme

Aquatic

Dark mode: Luminosity ratio is 4.06:1 (below 4.5:1 minimum)
High Contrast themes: Focused tag item does not properly respect system high contrast colors
When using TagPicker in dark mode (prefers-color-scheme: dark) or Windows High Contrast themes, the selected TagItem text has insufficient color contrast against its background when the item receives keyboard focus. The measured luminosity ratio is 4.06:1, which fails the WCAG 2.1 Level AA minimum requirement of 4.5:1 for normal text.

This accessibility issue impacts users with low vision or color vision deficiency who rely on adequate contrast to perceive focused elements.

Affected Modes
Mode Status
Light mode ✅ Pass
Dark mode (prefers-color-scheme: dark) ❌ Fail (4.06:1)
High Contrast - Aquatic ❌ Fail
High Contrast - Desert ❌ Fail
High Contrast - Dusk ❌ Fail
High Contrast - Night Sky ❌ Fail

Expected Behavior

The luminosity ratio of the focused TagItem text against its background should be ≥ 4.5:1 to meet WCAG 2.1 Level AA / MAS 1.4.3 (Contrast Minimum) requirements in all color modes including dark mode and high contrast themes.

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers

Steps to reproduce

1. https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers
2. Enable one of the following:

• Dark mode: Windows Settings > Personalization > Colors > Dark
• High Contrast theme: Windows Settings > Accessibility > Contrast themes > Select Aquatic/Desert/Dusk/Night Sky

3. Use keyboard navigation (Tab key) to focus on the selected tag item
4. Measure the foreground text color against the background using a contrast analyzer tool (e.g., Accessibility Insights for Windows)

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

https://connectivity.office.com/

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.