Disabled buttons styles


I am working with buttons switching from enabled to disabled state depending on some conditions.

I am using secondary buttons and I keep noticing disabled secondary buttons are far more apparent then clickable ones. It feels strange to me.

I was wondering if all disabled styles should change according to the button variant. I see it’s already happening but only for link and control buttons.

I also checked the primary/secondary disabled state colors for contrast accessibility and I found them not AA/AAA compliant. The colors are --pf-c-button--disabled--Color and --pf-c-button--disabled--BackgroundColor.

You can find an example test here https://contrastchecker.com/?c=6a6e73&b=d2d2d2

Thanks in advance for your feedback!

Thank you for bringing this to our attention @remanuel. There is a related design issue that was filed a while ago here: https://github.com/patternfly/patternfly-design/issues/901 I have linked your comment to that issue and we will look into this more.

cc @maceledo

Hi @remanuel! That’s a great question on the color contrast aspect and one that I’ve asked myself before too. Technically speaking, WCAG doesn’t require inactive UI controls to follow the color contrast requirements (https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum). Where it says “except for the following” (i.e. doesn’t apply to these cases) it mentions this:

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.

There’s a number of articles that try to explain this like the UX Movement that states, “Disabled buttons are signified by the lack of contrast to the text label. When a button is hard to read, users don’t bother with it, which is the intent of a disabled button. Not to mention, the contrast requirement does not apply to inactive components.” However, I can see both sides to the debate. On one hand, it might be more challenging for users with low vision to distinguish disabled elements from non-disabled elements if disabled elements meet color contrast. On the other, I could understand the argument that users should still be aware of these elements and have some other method to know that they’re disabled. I’ve even seen discussions about it in the Silver task force in working on WCAG 3.0 so that standard may change in the future.

I think it would make sense for now to follow the current standard, but I would love to talk to users that this impacts and get their input!

1 Like

Thank you @mcarrano.

And thank you @jessiehuff for your detailed response. I wasn’t aware of WCAG recommendations about color contrast for inactive UI controls. That’s an interesting debate around that and choosing a side is really difficult. I agree with you.

My only concern is still about the visual change between enabled and disabled styles for certain button variants. If it was decided to style the disabled status differently for control buttons, I suppose the same should be done for other buttons with light backgrounds, like the secondary ones.

Switching from a white button to a dark one draws some attention instead of making it less visible. At least that’s my perception. It would be great to hear what other people think about it.

Thank you both for your time!