Off state of toggle (and small toggle) lacks 3:1 contrast with adjacent color (background)

[mbgower]

Off state of toggle lacks 3:1 contrast with adjacent color ( either internal circle or background)

-->

Environment

v10, react, theme

Operating system
Windows 7

Browser
Firefox and Chrome

Detailed description

There are different implementations of the toggle, but all fail contrast for the 'off' state.

What did you expect to happen?
The off state should meet the minimum contrast.

What WCAG 2.1 checkpoint does the issue violate?
Non-text Contrast

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Storybook Toggle on (sufficient)

Storybook Toggle off (insuficient 2.5:1 between oval and lighter gray of circle)

Theme on and off toggle (same failure ratio as first screen shot)

V10 showing on and insufficient off toggle ( contrast for 1.8:1)

v10 Toggle small, with similar challenges for the 'off' toggle

Notes

In a situation where ALL the toggle versions contained a visible text state (On/Off) the non-text contrast could likely be excused since the visual cue would be redundant to the text and thus not required ("Visual information required to identify user interface components and states...)
That is, with a text state of "off" visible, the user no longer needs to discern the state of the toggle. However, this is a fairly easy issue to resolve -- just ensure the toggle border is 3:1 against the white background (for the v10 version) and that the circle is a lighter gray (or white) so that it is visible.

[asudoh]

CC @carbon-design-system/design just to see if the team has had a discussion on this topic.

[shixiedesign]

Waaaaait I know this issue must be fixed this sprint but y’all don’t know which colors are accessible yet with the new color palette getting implemented. Hang on till tomorrow.

[shixiedesign]

Toggle final spec (updated according to Anna's comment below)

Please note:

• Hover state should look the same as default.
• Disabled state has no change.

// on state

pill: $support-02
circle: $icon-03

// off state

pill: $ui-04
cirlce: $icon-03

Focus styling update

Additional change is adding a white inside border to focus state, so the focus border is 3:1 accessible against component & background. Reference the same treatment in primary button.

[aagonzales]

No hover

I don't think it should have a hover. Most toggles ive seen in the wild don't have a hover. Also similar control in Carbon, like check box and radio, don't have hovers

Focus

Agreed, I like the focus options you chose.