A toggle is a switch with two positions, on and off. You might use one to manage the state of something, such as a video chat screen between two friends at the same time or the setting on a car headlight.

Toggle is also used to describe a button that can be clicked on and off, like the ones on a keyboard that turn the Caps Lock or Num Lock function on and off. But when it comes to design, the toggle is often misused in ways that make users less able to understand their current state.

Many designers attempt to fix this problem by adding color as a visual cue to denote the active state of a toggle. But as we found in our research, the color cue is not reliable, especially when it’s used alone. It’s better to use a combination of multiple cues, including font-weight and size to distinguish the two button states. Embossment is another good option if you choose to add it as a visual cue, but it should be combined with a primary visual cue such as font-weight or color fill.

In addition to color, other design features that can help convey the toggle’s current state include the shape and position of the icon, its label and the color of its background. However, designers should be careful not to rely too heavily on any of these features, since they can be inaccessible to people who have visual impairments.