[Bug]: Checkbox looks disabled when unchecked

[markuslindmark]

Component

Checkbox

Package version

v9.58.2

React version

17.0.2

Environment

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M2 Pro
    Memory: 86.78 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 133.0.6943.54
    Safari: 18.3

Current Behavior

Many of our customers are complaining on the checkbox and its label looks disabled in its unchecked state.

Expected Behavior

Please add more contrast to the text. At least use foreground 2 instead of foreground color 3.

Reproduction

https://react.fluentui.dev/iframe.html?viewMode=docs&id=components-checkbox--docs#label-wrapping

Steps to reproduce

https://react.fluentui.dev/iframe.html?viewMode=docs&id=components-checkbox--docs#label-wrapping

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

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.

[FranciscoImanolSuarez]

I could take it tomorrow without any problem

[mainframev]

Hello @markuslindmark

I do not think it's an issue, the contrast ratio is good enough (6.19:1). The color value is correct and it's by design specification was made like this.

Not sure what's your product and how it looks there, but by default on white background, with default theme, it have sufficient contrast. You can consider manually adjust it, please refer to stylings docs:

• Styling components
• Styles handbook