A toggle is a switch that has two positions, like the up-and-down switches on your laptop. A toggle can also be a verb, as in “switch between screens as you video chat with two friends at once.” But in most of the world the word is more often used to describe an on-off command, such as pressing the caps lock key to keep your keyboard locked on or off.

The primary visual cue for a toggle is its color, and it’s important to consider the contrast and societal and cultural implications when choosing colors for different states. For example, using red for the on position can be counterintuitive to users who associate it with stop signs and traffic lights. Toggle buttons should also be designed to be clear in their meaning, and using good labels can help. Labels should clearly convey the state of the toggle, and short, direct labels work best.

In addition to color, other visual cues for a toggle can include font size and embossment. For font size, the results of our usability testing showed that a larger font for the active toggle outperformed a smaller one, but the difference was not as significant as you might expect. For embossment, the results were more mixed. While it can provide a subtle, distinctive appearance, the use of embossment alone proved unreliable for communicating the state of a toggle; it should be used in conjunction with other visual cues.