-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Open
Description
Component
ToggleButton
Toggle button in Toolbar
Package version
9.8.4
React version
18
Environment
System:
OS: Windows 11 10.0.22631
CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
Memory: 30.37 GB / 63.64 GB
Browsers:
Edge: Chromium (139.0.3405.86)
Internet Explorer: 11.0.22621.3527
Current Behavior
Actual result:
Color contrast for the selected state of the selected item in in toggle button is 1.142:1
which is less than the required 3:1

Expected Behavior
Expected result:
The color contrast for the selected item have minimum ratio of "3:1".
Reproduction
https://react.fluentui.dev/?path=/docs/components-button-togglebutton--docs
Steps to reproduce
- Press enter while focus is on the toggle button or click toggle button
- Run Accessibility Insight for Windows and select contrast checker
with contrast checker validate selected state and it's background
WCAG Reference:
Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
Teams
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.