Distinguishing on/off state only by color is highly non-usable. Neither from a13y perspective nor for ordinary users. And to keep in mind LTR/RTL problems if someone rely on knob position.
What's wrong with classic check box for that purpose?
Distinguishing on/off state only by color is highly non-usable. Neither from a13y perspective nor for ordinary users. And to keep in mind LTR/RTL problems if someone rely on knob position.
What's wrong with classic check box for that purpose?
Switches(toggles) on the other hand, imply immediate effects. Like a light switch, we expect the change to occur immediately.
It's fairly standard in 'traditional' desktop UI where actions are supposed to be initiated by regular buttons and things like radio buttons and checkboxes are for setting the options of the action. "Radio buttons never initiate an action" says the classic MacOS HIG, for instance.
Although anecdotally, I've helped a few older, technophobic people learn how to use websites/phones, and the majority of them know exactly what to do when presented with a switch, but they don't realize that they can click a checkbox. To them, it just looks like a square and they ignore it. (Take this with a grain of salt, my sample size is <10.)
All of the examples use at least color and position, the majority also add an additional icon in the checked state (one of those also has a different icon on the unchecked state) and Material Design uses a relative contrast distinction (which, unlike a simple color distinction, is readily distinguishable for the colorblind.) There is exactly one (ANT design) that uses only color and position to distinguish between checked and unchecked states.