A toggle is a switch that has two positions: on and off. It’s often used in hardware, such as the Caps Lock and Num Lock keys on a keyboard. It’s also a common control in software, such as options menus and most other kinds of button-like controls. In web design, a toggle is usually a control that lets you manage the state of content or view. The word is sometimes used figuratively to describe switching back and forth between settings or programs, such as toggling between screen resolutions during a video chat with multiple friends.
Toggle is one of the most versatile controls available for a website or app. It’s great for situations where you want users to be able to change something quickly and easily, such as adjusting the volume on a music player or turning off video playback while writing an email. A toggle is also a good choice for situations where users need to be able to select between two opposing values that affect the state of content or a view.
In some cases, however, toggles can be confusing. When they’re used in situations where it’s important that users understand their current state, like in the case of a toggle that allows them to download files, they can mislead users and lead to confusion and frustration. This is why it’s important to only use toggle buttons as controls in scenarios where they can be clearly understood by users.
The best way to make a toggle clear is to make sure it’s obvious which one is active by providing an easy visual cue. For example, using a different color for the active state can help. Unfortunately, many designers rely on color alone, without other forms of cueing, to make toggles clear. This is a mistake, as WCAG guidance 1.4.1 explicitly states “Don’t rely on only color to convey meaning.” This is why we recommend using a bold-thin text combination as your primary visual cue instead of a solid or striped background.
Using different font size can also help to make toggles more visible. Our tests have found that toggles where the difference between the active and inactive states was the most noticeable performed the best. This is because users were able to perceive the active state more easily, and they didn’t get confused by the inactive states.
Toggles can be used as a tool for multivariate testing (also called A/B testing). They allow developers to consistently send users down one or the other of a set of codepaths, based on their cohort. This is a powerful tool that can be used to make data-driven improvements to things such as the purchase flow of an ecommerce system or the Call To Action wording on a button. However, it’s vital that developers are aware of the limitations of toggles when using them for this purpose. Otherwise, they can end up making the feature unusable for certain users. This is why it’s so important to test your toggles before rolling them out for larger audiences.
