What makes a disabled state object look disabled is usually a combination of low contrast and low saturation. Thus, greyscale colours are commonly used for this purpose.

The problem

It’s a bit more complicated when the accessibility of disabled objects is considered. The purpose of the accessibility guideline on colour contrast is to avoid readability issues that are usually caused by low contrast between text and the background. The problem is basically when we use colours that pass WCAG colour contrast guidelines, it becomes too prominent to be perceived as a disabled state.

Luckily, WCAG 2.0 has noted that inactive user interface components have no contrast requirement:

However, there are a few more considerations needed than just colour contrast. Sean Elliott has written an article about other things to consider for disabled objects:

• Use disabled or aria-disabled attribute for screen reader users.
• Use cursor: not-allowed CSS to indicate disabled state for desktop users.
• Make it clearly different from non-disabled objects, and don’t just mute the colours, so that it can be perceived as disabled by colour-blind users as well.

Edge case

There could still be an edge case where a disabled button actually need to be accessible. In that case, a different visual indicator than colour will need to be considered.

However, it’s uncommon to design a disabled button with accessible colour contrast, so the design should be fully tested before implemented to confirm that users understand what the design is trying to communicate.