Is it ok to ‘grey out’ disabled buttons?

Accessibility, inactive buttons and WCAG.

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.

But how accessible is this?

This is such an accepted design pattern, that for some reason I’d never questioned it, until I was raging about colour contrast (I do that) and realised that a grey on grey, faded out quasi-invisible CTA (call-to-action) has to be one of the worst infringements of WCAG guidelines.. surely?

What’s the official answer?

Well according to WCAG, disabled buttons don’t have to adhere to AA colour contrast requirements.

Wait, wut?

Let’s take a closer look at this…

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: 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.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

So if a disabled button qualifies as an “inactive user interface component”, which technically it does, then we don’t have to make it accessible?

I can see how they got to this — there are lots of random, inactive, branding or creatively-led bits of UI detritus on most interfaces, but this can’t…