How Should You Choose Colors for Toggle Switches? How to Make ON and OFF Easy to Understand

A toggle switch is a UI (user interface) control used to switch a setting between two states: ON and OFF. A common design uses a stronger color for ON and gray for OFF, but color alone should not carry the state. Combine color with the position of the thumb and visible “ON” and “OFF” text so users have more than one way to understand the current setting.

Distinguish ON and OFF with position and text as well as color

W3C’s WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) Switch Pattern describes a switch as an input control for choosing between two values, on and off. In an ARIA-based implementation, role="switch" and aria-checked can expose the state. The label that identifies what the switch controls, such as “Email notifications,” should not change when the state changes; ON and OFF are the state, not the control’s name.

Visually, move the thumb to the right for ON and to the left for OFF, and add visible “ON” and “OFF” text when appropriate. WCAG (Web Content Accessibility Guidelines) 2.2 Use of Color requires that color not be the only visual means of conveying information. Treat color as a supporting accent and combine it with position and text.

Example: blue for ON and gray for OFF on a white background

In the following HEX examples, where HEX is a hexadecimal color code used on the web, assume the surrounding background is white ■#FFFFFF. For the ON state, use royal blue ■#1D4ED8 for the track and white ■#FFFFFF for the thumb. The track against the surrounding white and the white thumb against the track both provide about 6.70:1 contrast.

For the OFF state, use slate gray ■#64748B for the track and white ■#FFFFFF for the thumb. The track against the surrounding white and the white thumb against the track both provide about 4.76:1 contrast. If visible state text uses dark blue-gray ■#334155 on white ■#FFFFFF, the contrast is about 10.35:1.

WCAG 2.2 Non-text Contrast requires at least 3:1 contrast against adjacent colors for visual information needed to identify user-interface components and states. In this example, the track remains distinguishable from the surrounding background in either state, and the white thumb remains distinguishable from the track. Still, do not stop at blue for ON and gray for OFF; keep the thumb movement and text cues as well.

Keep brand color, state color, and focus as separate roles

ON does not have to be blue. If you use a brand color, test that color against both the page background and the thumb color. Moving the thumb between two positions preserves a state difference even when a user cannot easily distinguish the two hues.

Keyboard focus has a different meaning from ON or OFF. For example, a dark navy ■#0F172A focus ring against a white ■#FFFFFF surrounding background provides about 17.85:1 contrast. Keep the focus indicator separate from the state styling so users can tell which switch is currently being operated.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for the track, thumb, and surrounding background separately.