a11y tips is a series of short articles (300ish words) which stem from answers to questions I have been asked about web accessibility. These tips will hopefully help others and may also bring to the surface some obscure rules, tips and techniques.
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.
1.4.3 Contrast (Minimum): 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.
Before you rush off and ignore all your disabled buttons there is a Nicki Minaj sized BUT you should consider as well.
1.4.1 Use of Color: this guideline states colour should not be the only means to convey information.
To make sure your disabled button is the most accessible version of itself, I recommend the following:
- Use the
disabledoraria-disabledattributes to convey information to screen readers (only use aria attributes as a last resort) - Add to your disabled styles
cursor: not-allowedthis will serve as another visual indicator for mouse users. - Disabled styles should substantially look different to your non-disabled styles even for those who are RGB blind — grey out the button, dont just mute the colours.
Checkout the quick Codepen example below.
See the pen (@seanus1138) on CodePen.
Colour contrast is a big thing for web accessibility, crappy contrast can make the web harder to use for everyone, even those people with 20/20 vision.