Color communicates a lot information on interfaces. But not so much for color blind users. They often have trouble distinguishing between different colored objects.
If you only use color as a visual cue on your buttons, it’ll make it hard to tell what the active state is. Instead of only using color, you should also use shapes on your buttons.
Navigation Bars
There are many buttons on a navigation bar, but it’s not easy to tell which is the selected one if you only use color. Many sites will add a contrasting color to the button label. This is hard for color blind users to notice.
Instead of only using color, add an underline to the button label. Colorblind users won’t have to guess which button is selected. They’ll notice it at a glance.
Segmented Buttons
Another place where color blind users need more of a visual cue are segmented buttons. Many only use color fills to distinguish the different states. While this is clear to normal users, color blind users will have trouble telling them apart.
All they will see is a light color fill versus a dark color fill. It’s easy to wonder whether the light or dark color fill signals highlighting. Clear up the confusion by adding a checkmark icon next to the active state button label.
Toggle Switches
Toggle switches also face a visual cue problem for color blind users. When you only use color for on and off, it’s hard to tell the active state.
To make the states more clear, you can add an “on” and “off” label to the switches. Or, you can add a checkmark to the “on” state.
Color Is Not Enough
Color blindness affects a large percentage of the population. If you want to reach every user, communicating with color is not enough. Consider using checkmarks, underlines and labels as extra visual cues for clearer button states. Color blind users already have it harder than the rest of us. You can make their lives a little easier by doing a little more.
Book
Affiliate
I would argue in your toggle example that the use of text still doesn’t make it 100% clear which state the switch is in; does the “on” label mean that the switch is currently in the on position, or does that mean that clicking it would BRING it to the on position? for this reason, I like to design my toggles with both labels present, e.g.
on[ o]off
Agree with Kyle. this is a debatable topic. My idea would be, have the bounding box for the active state. if it is ON, have the color filled box to that state ex. [ [ON]] [[OFF] ]
Interesting topic. The grayed out versions of the switches would lead me to believe that they are disabled, and maybe disabled off. To fully model states I would think there are (off-disabled, on-disabled, enabled-and-on, and enabled-and-off).
Off-disabled and on-disabled might seem like odd possibilities, but in my world sometimes things are off or on and yet the user does not have the permission to change their state. Showing it as a switch conveys the thought that “someone” might have permission to change the state, and maybe they could request that permission somehow.
What kyle and Tom Johnson wrote: Combine the two by using green/red (on/off) for enabled functions that the user is permitted to control and grey for disabled functions that the user is not permitted to control.
I agree “Color is Not Enough” but choosing correct color is equally important