3

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?

  • That would depend on what the background colour of your application wouldn't it? Also, the treatment (i.e. visual styling) can be applied to different parts of the UI component to ensure that there is still good contrast. – Michael Lai Jun 25 '14 at 0:10
  • Relevant answer is provided here ux.stackexchange.com/questions/80881/… – Anna Rouben Jan 28 '16 at 18:54
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.

  • I'm not using any kind of hover treatment. Tabs that are not selected are simply lighter and have a light gray coloring to indicate that they are not in focus. However, this does not meet the color contrast ratio requirements and darkening the colors makes those tabs look in-focus. – Aaron Benjamin Jun 25 '14 at 15:54
  • As Michael Lai stated you can use "You can remove any stylistic embellishment (e.g. borders, shadows) to indicate a different state to other active UI elements" – PrashanthKrish Jul 25 '14 at 4:29
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.