Toggle is a control used to quickly switch between two possible states, such as on and off. It’s commonly used for “on/off” switches, but it can also be applied to binary actions like selecting a radio button or a checkbox.

When using a toggle, designers often add colors to help users distinguish between the two possible states. While this does help some users, it fails to address the more fundamental issue: people struggle to understand what a toggle does. In fact, the results of our research show that adding color is not an effective solution, and in many cases can actually make toggles harder to comprehend.

The reason for this is that the contrast between the toggle’s active and inactive state is usually too small to be easily perceived. This may be because the difference between the two states is not sufficiently emphasized by the visual cues provided (the different font size, the embossment, and so on). Interestingly enough, the toggle that had the smallest difference in text font size performed worst in terms of error rate and confidence score, indicating that it was hardest for users to grasp.

This is not to say that toggles should be avoided entirely, but rather that if an action can’t be changed immediately it should be marked up with a button> element and use the aria-pressed attribute instead. In any case, it’s always better to avoid toggles where a user needs to click a Save or Confirm button to apply the new state, and replace them with a checkbox in such situations.