Written by Anthony

Color communicates a lot on user interfaces. But not as much for color blind users. They often have trouble distinguishing between different colored objects.

If you only use color as a visual cue for your buttons, it’ll make it hard to tell what the selected 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 struggle to guess the selected button. They’ll notice it at a glance.

colorblind-navbar

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 selected state button label.

colorblind-segmentedbuttons

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 selected 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.

colorblind-toggleswitches

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.