Toggle () is a type of control used to quickly switch between two possible states. It is typically found in settings or preferences lists and is commonly used to turn things on or off. It is a preferred method to change system settings on mobile devices since it takes less screen space than a checkbox or radio button.

The word toggle is derived from the verb toggle which means to move back and forth, or alternate between two positions. It also relates to a physical switch that is moved up and down, or side to side. This is often used for things like turning lights on and off, or adjusting the volume of a music player.

In web design, toggles are often used in forms or in full pages of information. They are also found in many applications as a way to quickly switch between two options or states.

Users need to understand the current state of a toggle in order to make an appropriate choice. To help with this, designers use visual cues to signal the current state. These cues include the color, shape and movement of the switch. They may also use text to describe the binary action of a toggle. Toggle labels should be clear and descriptive, not neutral or ambiguous. For example, instead of a “Do you want to hide sent messages?” label, something like a “Hide all messages” would be more accurate and understandable.

One important consideration is that a toggle must be accessible to users with disabilities. Unfortunately, most web developers and designers don’t take accessibility into account when designing toggles. They often rely solely on color to convey the current state, and if users have a color vision deficiency, they cannot distinguish between the states of the toggle. Toggle designs that rely solely on embossment and/or font size have been shown to be the least effective in terms of accessibility.

The best approach is to combine both embossment and font-size to show the current state of a toggle. Embossment works well when combined with a larger-than-normal font size. This combination provides both a higher level of clarity and a sufficient amount of contrast to make the current state obvious. In contrast, when the toggle is smaller-than-normal, it can be difficult to distinguish between the different states as there is not enough contrast between the background and the text. In addition, using the same color for both the toggle and the label can confuse users as they will not know if it is on or off. In our studies, the toggles that performed best were those where the difference in text size was significant. However, even this wasn’t enough to provide the necessary level of clarity for users with color vision deficiency.