Guidelines and defaults for good contrast

[matatk]

(From the example you have in the README, and the other threads here, it looks like you're already considering this, but I had some suggeestions, which I hope may be of help.)

This may relate to #7 but I thought it best to open a separate discussion. Another very common accessibility barrier with switches relates to contrast. There are two problems that often crop up:

1. The contrast of the switch, in either "off" or "on" position, against its background is insufficient for some users to be able to see/identify it.

2. The contrast between the "on" and "off" positions is insufficient for people to be able to tell which is the current state.

The Web Content Accessibility Guidelines state that non-text contrast should be at least 3:1. It's also a very good idea to use means other than colour changes, such as shape and/or text, to convey information—but that's been discussed in #7; this issue is concentrating on the contrast side of things.

Many switch controls have a light grey border on a white background, which in the case of the switch in the figure below, is only 1.3:1—in fact that's the darkest border in the image; the one that partially surrounds the switch handle has lower contrast.

Further, the contrast of the green "on" colour on the white page background is only 1.9:1. Both of those are not sufficient for some users to be able to see them. People who are using a device in a bright setting, or outside, or people who have vision impairments could really struggle to perceive and thus understand the switches.

(Whilst the slider/handle does move, which provides an indication other than colour that something has changed, because of the low contrast in the "off" position, the fact it's moved could easily be missed.)

Positive examples: @scottaohara has created some great examples of accessible switches.

Suggestions:

1. Your "off" switch example has good contrast on a page with a light background, so this is a good start. Perhaps you could provide two sets of default colour values, for "light mode" and "dark mode", as examples?

2. Please consider helping people to design accessible switches by mentioning the minimum contrast accessibility requirements in the documentation.

If you'd like any suggestions for colour schemes and/or documentation, I'd be happy to provide some.

[aardrian]

When user agents implement default styles, this document should encourage those UA default styles to at least meet WCAG 2.1 contrast minimums as well.

[aardrian]

Sorry, in my head I was thinking of this as a native control when I wrote the above.

[domenic]

To be clear, this is a proposal for a new native control. So yeah, whatever is currently done for checkbox, radio buttons, etc., is how we should encourage implementers to implement with good default styling.