[Toggle] Text when Disabled does not provide enough contrast and is difficult to read

[lily-peng]

[Toggle] Text when Disabled does not provide enough contrast and is difficult to read

Environment

All browsers

Detailed description

Latest version of Carbon. We notice the colors chosen for when the Toggle component is disabled doesn't provide enough contrast to read the text. Furthermore, in our product specifically (SOAR Playbook Designer), we use Gray-90 as the background for the Toggle, and when disabled, the Toggle SVG's background matches the same color and isn't discernible.

What WCAG 2.1 checkpoint does the issue violate?

Text contrast. Although disabled buttons are exempt from contrast requirements, we think it would still be beneficial to provide clearer contrast in these cases.

Additional information

Example in product (SOAR Playbook Designer) Gray-90 background:

Example in Storybook, white background:

[Spectre-ak]

Can I work on this?

[joshblack]

cc @carbon-design-system/design wanted to double-check on what the tokens should for this situation 👀

[laurenmrice]

The color token for disabled text should be $disabled-02. @lily-peng But for this situation, are you showing text and a status indicator to represent that the playbook is disabled? Instead of using disabled text, you could benefit from using a read-only state instead if it is important for the user to read and understand the content.

[aagonzales]

Text contrast. Although disabled buttons are exempt from contrast requirements, we think it would still be beneficial to provide clearer contrast in these cases.

If a user needs to be able to read the toggle then you should not be using the disabled component. Disabled components are not accessible by screen-readers and will be skipped and therefore increase the legibility contrast will only help sighted user with the disabled state.

I'd advise exploring other ways to signal the ux interaction you're trying at achieve such as a read-only state as Lauren suggest or perhaps adding a lock icon beside the toggle to signify it can't be changed.