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.

[msftedad]

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.

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

[valentinpalkovic]

Hi @msftedad

Thank you for reporting this issue. It seems, that the reproduction has a custom theme applied. Would you happen to have any recommendations of what Storybook itself can enhance? I don't know whether the accessibility issue is related to the custom theme or not.