Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Luminosity contrast ratio of keyboard focus indicator with the grey background on the left navigation panel is less than minimum required ratio of 3:1. #29668

Open
msftedad opened this issue Nov 20, 2024 · 0 comments

Comments

@msftedad
Copy link

Describe the bug

Luminosity contrast ratio of keyboard focus indicator with the grey background on the left navigation panel is less than minimum required ratio of 3:1

Observation:
Same issue is repro'ing on both Mac and Windows.

User Impact:
Visual impaired users and low vision users will be impacted if Luminosity contrast ratio of keyboard focus indicator is less than the required ratio due to which they will not be able to identify their focus properly and will not be able to complete their task easily.

Actual Result:
Luminosity contrast ratio of keyboard focus indicator with the grey background for 'Content' Control in the left navigation panel is 1.2:1 which is less than minimum required ratio of 3:1.

Refer Attachment: Luminosity contrast ratio of keyboard focus indicator with the grey background is less than minimum required.
Image

Expected Result:
Luminosity contrast ratio of keyboard focus indicator with the grey background for all the controls in the left navigation panel should be greater than minimum required ratio of 3:1.

Reproduction link

About / Introduction - Page ⋅ Storybook (ambitious-cliff-0c8148010.2.azurestaticapps.net)

Reproduction steps

  1. Open URL: About / Introduction - Page ⋅ Storybook (ambitious-cliff-0c8148010.2.azurestaticapps.net) in latest edge browser.
  2. Press tab key to reach to the controls in the left pane.
  3. Press tab key and reach to the 'Content' control.
  4. Open Color contrast analyzer and select foreground and background for the focus indicator using color picker.
  5. Verify whether on pressing tab keys to reach to the 'Contents' control present in the left navigation panel, luminosity contrast ratio of keyboard focus indicator with the grey background is greater than minimum required or 3:1 or not.

System

Test Environment: 
OS: Windows 11 Version 24H2 OS build 26100.1742
Browser: Microsoft New Edge Version129.0.2792.52(Official build) (64-bit)
URL: About / Introduction - Page ⋅ Storybook (ambitious-cliff-0c8148010.2.azurestaticapps.net)
Tool Used: Color Contrast Analyzer

Mac Test Environment:
OS: macOS Sequoia 15.0.1
Browser: Microsoft New Edge Version130.0.2849.56 (Official build) (64-bit)
RL: About / Introduction - Page ⋅ Storybook (ambitious-cliff-0c8148010.2.azurestaticapps.net)
Tool Used: Color Contrast Analyzer

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant