Increase the visual difference between the Toolbar Icon Button on/off state

[myvuuu]

💡 Suggestion

Update toggle on and off state of the Toolbar Icon button to be more visually distinct.

Success Criteria

• The toggle on and off state of the Toolbar Icon Button are visually distinct (color contrast between on and off background must exceed 3:1 OR the component design can be altered to increase the distinction by inverting the color scheme, adding an outline, etc.)
• Toolbar Icon Button utilizes the new set of css variable tokens

Motivation

The toggle on and off state of the Toolbar Icon button isn't visually distinct enough for users with low vision / color blindness to defer the toggle state based on color alone.

Example

Please provide some examples of this suggestion in practice.

[williamjstanton]

Suggesting under Motivation: To improve conformance with WCAG 2.2 guidelines 1.4.1 Use of color and 1.4.11 Non-text contrast.

Toggle buttons with an inverted color scheme:

Toggle buttons with an outline:

Toggle buttons with a fill or no-fill scheme:

[aek5ba]

Hi @williamjstanton - just wanted to check back in to see if this is something that you'd still like to see completed? And is this currently an accessibility violation, or is this an enhancement? Thanks!

[williamjstanton]

Hi @williamjstanton - just wanted to check back in to see if this is something that you'd still like to see completed? And is this currently an accessibility violation, or is this an enhancement? Thanks!

Yes, I would. The background color change signaling the 2 states of the button does not satisfy 1.4.11 Non-text contrast. It's hard for users to see and understand which state the toggle is in.