[Bug]: Checkbox fails accessibility requirement & Update to inverted colors

[redongreen]

Library

React Components / v9 (@fluentui/react-components)

System Info

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/theme-color--page

Are you reporting Accessibility issue?

No response

Reproduction

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/theme-color--page

Bug Description

Context

The checkbox component currently fails accessibility requirements. This issue was introduced when we updated our Brand Communicate Blue ramp, where we normalized our default color ramp to be less saturated. Daisy created a proposal to update our controls to use inverted colors. This proposal aligns with our guidance on brand colors.

The goal is to;

1. Address accessibility issues with our checkbox component
2. Create coherence between our implementation and guidelines
3. Ensure that we are applying our semantic tokens consistently

Examples
(A) The checkbox component fails accessibility

(B) Inverted colors should be inverted from light to dark, and dark to light. Currently, Neutral Background Inverted is a combination of dark in light and dark in dark theme. Neutral Foreground Inverted is light in light theme and light in dark theme.

The following design tokens need to be updated;

---

[Change] Neutral Foreground Inverted value

From

[Light] Neutral Foreground Inverted = White
[Light] Neutral Foreground Inverted Hover = White
[Light] Neutral Foreground Inverted Pressed = White
[Light] Neutral Foreground Inverted Selected = White

[Dark] Neutral Foreground Inverted = White
[Dark] Neutral Foreground Inverted Hover = White
[Dark] Neutral Foreground Inverted Pressed = White
[Dark] Neutral Foreground Inverted Selected = White

To

• [Light] Neutral Foreground Inverted = White
• [Light] Neutral Foreground Inverted Hover = White
• [Light] Neutral Foreground Inverted Pressed = White
• [Light] Neutral Foreground Inverted Selected = White
• [Dark] Neutral Foreground Inverted = Grey 14
• [Dark] Neutral Foreground Inverted Hover = Grey 14
• [Dark] Neutral Foreground Inverted Pressed = Grey 14
• [Dark] Neutral Foreground Inverted Selected = Grey 14
• [High Contrast] Neutral Foreground Inverted (rest, hover, pressed, selected) = HighlightText (#000000)
• [Teams Dark] Neutral Foreground Inverted (rest, hover, pressed, selected) = Grey 14

Impacted components

• Checkbox (impacted but no needs needed)
• Tooltip FG (change Tooltip FG to Neutral Foreground Static Inverted)
  • Change is for token below
• Spinner FG (change Subtle FG to Neutral Foreground Static Inverted)
  • Change is for token below

---

[Add] Neutral Foreground Static Inverted


New design token:

• [Light] Neutral Foreground Static Inverted = White
• [Dark] Neutral Foreground Static Inverted = White
• [High Contrast] Neutral Foreground Static Inverted = hcCanvasText (#FFFFFF)
• [Teams Dark] Neutral Foreground Static Inverted = White

Description: Inverted static foreground

Impacted components

• Tooltip FG (change Tooltip FG to Neutral Foreground Static Inverted)
• Spinner FG (change Subtle FG to Neutral Foreground Static Inverted)

---

[Change] Neutral Background Inverted value

From

[Light] Neutral Background Inverted = Grey 38
[Dark] Neutral Background Inverted = Grey 24

To

• [Light] Neutral Background Inverted = Grey 16
• [Dark] Neutral BackgroundInverted = White
• [High Contrast] Neutral BackgroundInverted = hcCanvas (#000000)
• [Teams Dark] Neutral BackgroundInverted = White

Impacted components

• Tooltip BG (change Tooltip BG to Neutral Background Static)
• Popover BG (change Popover BG to Neutral Background Static)

---

[Add] Neutral Background Static

• [Light] Neutral Background Static = Grey 20
• [Dark] Neutral Background Static = Grey 24
• [High Contrast] Neutral Background Static = hcCanvas (#000000)
• [Teams Dark] Neutral Background Static = Grey 24

Description: Static background surface

Impacted components

• Tooltip BG (change Tooltip BG to Neutral Background Static)
• Popover BG (change Popover BG to Neutral Background Static)

---

Components not directly impacted but must be updated


Checkbox (checked)

• Change the checkbox “checkmark” from Neutral Foreground On Brand to Neutral Foreground Inverted

Switch (checked)

• Change the switch knob from Neutral Background 1 to Neutral Foreground Inverted

Logs

No response

Requested priority

High

Products/sites affected

Fluent 2 WEB UI

Are you willing to submit a PR to fix?

no

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.

[redongreen]

@spmonahan

I updated my comment with the following correct;

Previously I said:
[Light] Neutral Background Inverted = Grey 20

The actual value should be:
[Light] Neutral Background Inverted = Grey 16

[spmonahan]

The "brand" appearances for Popover looks like it needs an update text color. There's a comment about it in source and it has some clear contrast issues in most themes.

One example: