Addressing insufficient contrast on disabled buttons

[tristanpendergrass]

Hi folks,

I am trying to use a <button class="btn" disabled /> but finding that the contrast between button text color and button color is way too low. I can plainly observe that I can barely read it myself, but just to double check I measured the contrast with the WCAG accessibility tool which reports it's only 1.45, not enough to meet standards.

I'm curious what other folks find themselves doing for disabled buttons? Even if you're not determined to meet certain accessibility guidelines, it's just hard to read and I would think most people end up styling their disabled buttons differently than the default?

[saadeghi]

It's disabled, you're not supposed to read it or use it or do anything with it unless it gets enabled.

[tristanpendergrass]

I understand that a disabled button isn't to be interacted with, e.g. pressed. But the text is still there, and the developer clearly left it there for a reason since it could be omitted if it's totally irrelevant, right? But my main argument rests on the difficulty for users with impaired sight (getting there, myself, as I get older!) to read it. While users with good eyesight might just struggle to read it, others wouldn't be able to at all.

I was able to get it to a level I found easily readable while still clearly conveying its disabled status by setting text-base-content text-opacity-50 on the button.

[saadeghi]

text-base-content text-opacity-50

With a readable contrast, how are you going to explain to the user why the button they are trying to click for 20 times, is not working?

The whole idea of a disabled button is that is should not look like you can use it.
It's supposed to be unreadable no matter if you have impaired sight or not. You just know there's a button there but it's not usable unless some interaction makes it usable.

[tristanpendergrass]

To me, my version still looks disabled (button continues to have grayed out background color, text is noticeably grayed out even at 50% opacity) while still being readable. I think a designer could have many reasons for wanting to indicate to a user simultaneously that a function is possible under certain conditions but not possible right now, which is what I'm aiming for. Appreciate you taking the time to consider this.

[saadeghi]

I will gladly change this style if I see a better way to represent a disabled button, but the criteria is it should not look like a clickable button in any situation. It is a widely accepted pattern in UI design to make it "gray" but that can be confusing in a lot of situations.

What if the color "gray" is my brand color?
What if there's no other button in the page to for the user to compare visually and realize "Ah this button is gray so it must be disabled"?
How different is it going to look from a "ghost" button or a "soft" button or other types of button?

The cost of a disabled button being unreadable is nothing. You know there's some button there but it's not for you to use. The cost of user mistaking it with an actual button and trying to click it and getting disappointed or angry is a lot.

Let me know if you could find a better solution because the color gray with a readable text is just a color like any other and is not enough to make something look disabled. It should be hard to read.

[tristanpendergrass]

Sorry, I didn't set it to gray, that was badly phrased by me. I set the font to text-base-content text-opacity-50 while leaving all other disabled buttons styles alone which happens to look gray in the color scheme I was in.