Itqualityassurance
Disabled buttons color should contrast with the background with at least a 3:1 ratio to meet new WCAG 2.1 requirements.
- Are disabled buttons bad for accessibility?
- How do you fix the contrast color on accessibility?
- What color should disabled buttons be?
- Do disabled buttons need to meet color contrast?
Are disabled buttons bad for accessibility?
Bad accessibility
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). No need to explain that users with disabilities will face problems with such behavior.
How do you fix the contrast color on accessibility?
What to do (in short) To fix an Insufficient Color Contrast error, you will need to ensure that flagged elements meet the minimum required ratio of 4.5:1. To do so, you will need to find the hexadecimal codes of your foreground and background color, and test them in a color contrast checker.
What color should disabled buttons be?
Disabled or inactive buttons are often “greyed out” — with white or grey text on a grey button. These can be used to communicate to the user that some kind of task needs to be completed by them before they can proceed, such as entering an email address in a text field prior to sign up.
Do disabled buttons need to meet color contrast?
The question: Do disabled buttons need to conform to colour contrast guidelines? The answer: No disabled buttons do not need to pass color contrast guidelines.
