Page MenuHomePhabricator

Disabled dropdowns are not accessible
Closed, DeclinedPublic

Description

The documented style of disabled dropdowns does not meet accessibility standards. There's an insufficient color contrast of 1.61 between the foreground text color (#ffffff) and the background color (#c8ccd1), even for a bold font size of 16px (as implemented in WiKit).

Screenshot 2021-05-03 at 16.30.01.png (545×724 px, 72 KB)

As with framed buttons (which present the same low-contrast issue, T281719) we should explore design alternatives to communicate this state in an accessible way. As designers, we should make it possible for all our users to be able to perceive the status of all components at all times and yet, we want to prevent users from perceiving disabled components as active.

Event Timeline

We've discussed this in the design team back when we've brought the color palette to OOUI, see T146823 and alike. We've decided, backed by WCAG 2.1

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

not to increase color contrast on a number of disabled elements, where readability could be neglected. In contrast see our weighed in fulfillment of contrast ratios on labels for disabled elements or inactive tabs.
Context decides and product designer has to provide sufficient contextual information to make user clear about how to enable element if possible and what it is about.

Yes, indeed, that unfortunate exception :-/

I guess the standard is the standard, and we're therefore not obliged to make a visual change here, but I completely agree with your last sentence: it's still very important that we help individuals understand that something is unavailable or not ready to be used and why, to make sure the same information is available to users regardless of their vision.

Oh! Nice move. Thanks for adding that note, Volker 🙏🏻