Skip to content

[Bug]: Color contrast for the selected state is not sufficient #35021

@kolaps33

Description

@kolaps33

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

Image

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

  1. Press enter while focus is on the toggle button or click toggle button
  2. 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions