Why You Shouldn’t Gray Out Disabled Buttons(uxmovement.com)

over 4 years ago from anthony thomas, ux designer

  • Rhys MerrittRhys Merritt, over 4 years ago

    The article is nonsense, and should be removed. The biggest problem with it is that it's based entirely off an incorrect idea.

    Form buttons should not be disabled at all. They should remain enabled, so that when a user clicks the button, there is the opportunity to display information for the user to complete the required fields in order to proceed.

    A transparent button blends into the background more, while a gray one remains in the foreground (unless the background is gray).

    blends into the background - rendering the text unreadable. Awesome.

    Foreground elements are more noticeable to users. They tend to view them as interactive, which means they’re more likely to interact with a grayed out disabled button.

    Users are supposed to be encouraged to interact with a form button. That's entirely the purpose of a form button. Once a user reaches the button, they should interact with it. And if they try to interact with it before completing all required fields, you should check to ensure you have enough signals to indicate what is, and is not a required field.

    That simple form usability guideline aside - just look at the contrast on the disabled button from this article! Talk about accessibility failure.


    Users can easily mistake a grayed out disabled button for a secondary call to action. Or, worst-case scenario, they can mistake it for a poorly designed button with low color contrast.

    So you're aware of contrast, and how it works - yet you are suggesting a transparent button that blends into the background?... Wow

    By following this technique, you’ll make your disabled buttons look disabled without giving users any surprises. Instead, the only surprise they’ll get is how smooth and seamless your interface is.

    I hope people do not follow this technique, and instead take advice from websites like nngroup, or sites like this or this

    2 points
    • Sjors TimmerSjors Timmer, over 4 years ago

      From my experience: User comes at the bottom of a long form, tries to click the button to go further and it doesn't work. No idea why it doesn't work, it just doesn't. Then has to go on a wild goose chase to find why somewhere in the form something isn't validated; nothing of this is highlighted so good luck finding it.

      And greying out/making this transparent in no way comes anywhere near a decent contrast rate for people with non-perfect eye-sight.

      1 point