Itqualityassurance
Grey is a convention, not a rule. It helps to understand why grey is used for disabled buttons: Grey is a neutral color so it's good for communicating subtle or de-emphasized elements. Disabled buttons (because they are not clickable) are usually communicated to the user via de-emphasis.
- Why avoid disabled buttons?
- Do screen readers skip disabled buttons?
- Should disabled buttons be focusable?
- Should you use disabled buttons?
Why avoid disabled buttons?
Bad accessibility
Grey buttons with gray labels can easily fail to meet color contrast recommendations for text. Sometimes disabled buttons are designed in a way that they cannot be read by a screen reader (buttons are not focusable, and hence users can't reach them with a keyboard).
Do screen readers skip disabled buttons?
Screen readers ignore disabled controls, so screen reader users won't hear the message. Add some nearby visible help text for the button. This would work for sighted users, but not necessarily for low vision users or blind users using a screen reader.
Should disabled buttons be focusable?
If you need to use disabled buttons, consider ways to make them focusable and useful by also making them more inclusive and providing a way out for customers to send all the details to the customer support.
Should you use disabled buttons?
While designing the UI, avoid using a disabled button as it becomes hard to find out why it is disabled and what should be done to make it enable. It is better to keep buttons enabled all the time and highlight the field if users don't provide the required information.
