Testing Contrast in Disabled Buttons, Sold Out Options, and Placeholder States

Disabled does not mean invisible is acceptable. What WCAG actually exempts, what it does not, and why sold out size selectors are the test case that catches stores out.

A sold out size, greyed to near invisibility, is a design convention so common that few teams question it. Then an audit asks a plain question: can a shopper with low vision tell which sizes exist, which are available, and which are sold out, without relying on that faint grey alone? On many product pages the honest answer is no, and the page has turned stock information into a guessing game.

WCAG treats inactive components differently, and that difference is widely misread. Understanding what the exemption covers, and what it pointedly does not, is what separates a defensible sold out treatment from one that hides information from the shoppers who need it most.

What the exemption actually says

Under WCAG 1.4.3 Contrast Minimum, inactive user interface components are exempt from the contrast requirement for their text. A genuinely disabled button that does nothing can be low contrast without failing that criterion. That is the full extent of the generosity, and it is narrower than most design systems assume when they fade an entire component group to 20 percent opacity.

The exemption does not cover information. If the only way to learn that a size is sold out is to read low contrast text or notice a faint strikethrough, that is 1.4.1 Use of Color territory as well: colour and lightness alone are carrying meaning. The sold out state needs another cue, the words sold out, an announced state, a pattern, something that survives when contrast and colour perception do not.

A disabled control still needs a name and a state

Contrast aside, a sold out option presented as a button still has to be identifiable. Screen reader users need to encounter the option, hear its size, and hear that it is unavailable or disabled, rather than finding a gap in the size list and wondering whether the store simply does not make their size. A size that vanishes from the accessible list entirely tells a disabled shopper a different, and worse, story than a size that is present and marked sold out.

Test the selector as a whole, not swatch by swatch. Can you move through every size by keyboard where selection is possible, land on an available size and select it, and get a clear account of the unavailable ones without focus being forced onto controls that do nothing? A selector where sold out options are focusable but inert, with no explanation, strands keyboard users on dead stops.

Placeholder text is not exempt either

The same fading habit shows up in form placeholders rendered at very low contrast, then treated as if they were disabled components. They are not. A placeholder carrying the only instruction for a field, an email format, a gift message limit, needs to be readable, and the better fix is still a real label and visible instruction outside the field, so nothing depends on the placeholder being read at all.

Record these findings separately. Sold out contrast, colour only state information, missing disabled state in the accessible name, and unreadable placeholder text are four different fixes owned by potentially four different changes. Bundling them into one contrast ticket is how three of them quietly never get done.

Related reading: Testing Target Size: The Small Buttons That Block Mobile Checkout, Testing Accessible Names on Header Icon Buttons, Testing Heading Structure on Product Pages Without Guessing.

Frequently asked questions

Are disabled buttons exempt from contrast rules?

For their own text, yes, inactive components are exempt from WCAG 1.4.3. That exemption does not extend to information the component carries, such as which sizes are sold out, which still needs a cue beyond colour or faintness.

How should a sold out size be presented?

It should remain identifiable, be marked as sold out or unavailable in text or an equivalent accessible state, and not depend on a strikethrough or pale grey alone to convey that it cannot be bought.

Should sold out options be keyboard focusable?

Generally no, if they do nothing, but they should still be discoverable by assistive technology as present and unavailable. Focusable but inert controls with no explanation strand keyboard users.

Is low contrast placeholder text a failure?

If the placeholder carries information the user needs, it should be readable, and it is not covered by the inactive component exemption. The stronger fix is a visible label and instruction outside the field.