4

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?

Improve this question
3
  • 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. Commented Jun 25, 2014 at 0:10
  • Relevant answer is provided here ux.stackexchange.com/questions/80881/… Commented Jan 28, 2016 at 18:54
  • I recommend the article Axesslab.com - Disabled buttons suck which also provides the solutions Commented Feb 21, 2020 at 11:21

2 Answers 2

Reset to default
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.

Improve this answer
2
  • 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. Commented Jun 25, 2014 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" Commented Jul 25, 2014 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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.