A toggle (or toggle switch) is a kind of switch that can only be in one of two states — on or off. They’re used all the time in software when you have a list of options or preferences. A checkbox or radio button are also toggles.
In general, toggles suck. They make it difficult to understand the current state, because the default and active states are different (as opposed to a radio button which will always show the same option when pressing). This cognitive load causes them to be harder to use and less reliable than other kinds of switches.
However, there are situations in which toggles can work well. The key is to ensure that the toggle’s current state is obvious for users through context. That’s where good labels come in, which describe what the switch will do when it’s ON, and what it will do when it’s OFF. This way, users know what to expect and can easily understand the effect of their input.
Toggles can also be cognitively OK if they don’t depend on color to convey meaning — but most toggles do, and this is a big problem. Using colors like green and red to represent on/off states is an ineffective way to communicate meaning for some users, such as those with red/green color blindness.
Another challenge with toggles is that they require a save or confirm button in order to take effect, which is not consistent with the WCAG guidance that “don’t rely on color alone to convey meaning”. This can be frustrating for users, especially if the change takes more than a few seconds to take effect. To address this, we need to move away from toggles and replace them with other forms of control that will be more consistent with the WCAG guidance.
