Making Selected Button States Clear for Color Blind Users

by on 09/01/15 at 1:37 pm

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-navigation

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.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

2 Responses to “Making Selected Button States Clear for Color Blind Users”

  1. kyle

    Sep 30th, 2015

    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

  2. Richard

    Oct 21st, 2015

    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] ]

Leave a Comment