Is it ok to ‘grey out’ disabled buttons?

Accessibility, inactive buttons and WCAG.

H Locke
6 min readMay 11, 2020
two buttons, one grey to indicate “disabled” state with “cursor disabled” mouse hover state

DDisabled 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.

screenshot of WCAG website, text is repeated in body copy below

Wait, wut?

--

--

H Locke

UX person. I design things and I study humans. 150+ articles on Medium — https://medium.com/@h_locke/lists