Accessible Disabled State

Question

Is there a best practice for disabled/inactive buttons or tabs that meet accessibility color contrast requirements?

A greyed out treatment seems to be the most common, however grey on lighter grey doesn't meet accessibility requirements for color-blind or vision impaired users.

Is there another common, popular treatment that maintains a high contrast while still being obviously disabled/inactive?

Answer 1

There are a few strategies you can try:

• You can simply remove any hover-over or on-click style changes to show that something is not interactive
• You can remove any stylistic embellishment (e.g. borders, shadows) to indicate a different state to other active UI elements
• You can bring up a prompt or tooltip to show why the component is inactive
• You can use a status indicator badge/icon/label

Perhaps a combination of the above strategies will produce the best effect, but it depends on your application design styles and interaction patterns.

Answer 2

Be wary of solutions that require the user to hover over a UI element: these won't work with touch-based UIs.

Some extra visual strategies to explore:

• If few elements are interactive on your UI, increase the contrast for both active and inactive UI elements (e.g., a bright-coloured background for active elements and a light grey one for inactive ones)
• Make sure that labels remain readable but not the decorations or input widgets that accompany them; for instance grey out a checkbox more or button decorations as much as you'd like but keep the label within accessibility guidelines

However bear in mind the following (from the Web Content Accessibility Guidelines 2.0):

Colour alone should not be used to indicate mandatory fields. This issue is addressed in Success Criteria 1.4.1 (Use of Color) with the following Sufficient Techniques:

• G122: Including a text cue whenever color cues are used
• G14: Ensuring that information conveyed by color differences is also available in text

For Web UIs, you'll need some extra cues indicating which form elements are disabled, such as appending "(disabled)" next to form element labels. This is feasible with a CSS stylesheet, and you can just let users switch to a "high contrast" version of the website by providing the option in your menus.

If you're writing a UI toolkit, you should at least provide programmatic ways to determine whether a widget is disabled and/or methods that allow one to alter how your toolkit displays disabled widgets.