Luminosity ratio of focus indicator for ‘Slide me!’ control is less than the minimum required ratio of 3:1

[msftedad]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Luminosity ratio of focus indicator for ‘Slide me!’ control is less than the minimum required ratio of 3:1. Low vision user will not be able to identify the currently focused element and perform action on it if focus indicator ration is less than 3:1.

Reproduction

StackBlitz link:
Steps to reproduce:

1. Open URL Slide toggle | Angular Material in the Edge Browser.
2. Angular Material tabs page gets displayed.
3. Press tab key till to reach Basic slide-toggles.
4. Open Accessibility insights for Windows tool.
5. Select the Foreground color picker and Background color picker of Focus indicator of 'Slide Me' Control.
6. Observe that luminosity ratio of focus indicator of 'Slide Me' control is 1.277:1 which is less than required ratio 3:1

Expected Behavior

Luminosity ratio of focus indicator for 'Slide Me' control should be greater than or equal to 3:1.

Actual Behavior

Luminosity ratio of focus indicator for 'Slide Me' control is 1.277:1 which is less than required ratio 3:1 in Windows.

https://github.com/user-attachments/assets/25be9225-8bae-4243-96d2-ed4da35a2086

Environment

• Angular: 5.2.5
• CDK/Material: 5.2.5
• Browser(s):Microsoft Edge Version 133.0.3065.69, Chrome Version 133.0.6943.99
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11 Enterprise Insider Preview Version 24H2 (OS Build 26100.3194)

[crisbeto]

This is just the color from the Material spec so we can't do much about it. There are a few options if it's a problem for your app:

1. You can enable strong focus indicators which makes the indicators much easier to see:

@include mat.strong-focus-indicators();
@include mat.strong-focus-indicators-theme($your-theme);

2. You can use the style overrides API to change the color: https://material.angular.dev/components/slide-toggle/styling