What Color Should a Disabled Button Be? Web Design That Makes Its Inactive State Clear

Is it enough to make a disabled button pale gray? Even if it looks different from an active button, visitors may be left wondering why they cannot proceed. And changing only the color can create a control that appears disabled but still responds to clicks or keyboard input. This article uses a bicycle-rental booking form to show how button colors, nearby explanations, and actual disabled behavior should work together.

Explain why the action is unavailable before making the button look faint

A disabled button is visible but currently unavailable for activation. For example, if a rental date and bicycle type must both be selected, place a short message near the action: “Choose a date and bicycle type to continue.” An enabled button can have a prominent surface and a clear label, while the disabled version uses a quieter treatment together with an explanation. Color should not be the only clue that the action is unavailable.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, ordinary text generally needs at least 4.5:1 contrast against its background, large text at least 3:1, and essential non-text indicators identifying active controls generally at least 3:1 against adjacent colors. There is an important exception: genuinely inactive user interface components, including their text, are exempt from these contrast requirements. That does not mean a disabled label needs to become nearly invisible. Keeping its wording reasonably legible helps visitors understand which action is waiting for input.

For implementation, the HTML (HyperText Markup Language) disabled attribute on a native button prevents activation and normally removes the button from the Tab key navigation order. The aria-disabled="true" attribute communicates a disabled state to assistive technologies but does not itself block clicks or keyboard activation. If it is used to keep a control discoverable by keyboard, the application must also prevent its action from running.

Example colors for a bicycle-rental reservation form

Imagine a page where customers choose a rental date and bicycle model before reviewing their booking. A HEX code is a hexadecimal notation for specifying web colors. Define separate treatments for the input fields, selected choice, unavailable action, and enabled action instead of turning the entire form gray.

• Page background and body text: Use off-white ■#F7F8F5 with charcoal ■#26343D for instructions. Their contrast ratio is approximately 12.01:1. Dark blue ■#20576B headings against the same background provide about 7.47:1.
• Form card: Place field labels in charcoal ■#26343D on a white ■#FFFFFF card, with about 12.80:1 text contrast. White ■#FFFFFF differs from the surrounding off-white ■#F7F8F5 by only about 1.07:1, so add a gray-blue ■#75858E border. It contrasts by approximately 3.82:1 against white ■#FFFFFF.
• Date and bicycle selection controls: Use white ■#FFFFFF input surfaces with gray-blue ■#75858E outlines. The outline contrasts about 3.82:1 against white and 3.58:1 against the page background ■#F7F8F5. Show visible field names and use text such as “Select a rental date” when no selection has been made.
• Selected bicycle model: Use a pale blue-green ■#E5F0F0 selection surface with charcoal ■#26343D lettering for about 11.00:1 contrast. A deep blue ■#20576B selection outline contrasts about 6.85:1 with that pale surface. Include a checkmark or the words “Selected” instead of relying solely on the color change.
• Explanation beside the disabled button: Show “Choose a date and bicycle type to continue” in muted blue-gray ■#52636A on off-white ■#F7F8F5. The text has about 5.88:1 contrast. Keep this instruction close to the button and easy to find.
• Disabled “Review booking” button: Use a pale gray ■#D8DFE0 background with deeper gray ■#4E5E66 lettering. Text-to-button contrast is about 4.99:1, while the button surface differs from the surrounding off-white ■#F7F8F5 by only about 1.27:1. Those contrast values are not mandatory for an inactive control, but this is a way to keep its purpose legible while making it less prominent.
• Enabled button after both selections: Once a date and model have been chosen, switch to deep teal ■#165F75 with white ■#FFFFFF text reading “Review booking.” Text contrast is about 7.17:1, and the button differs from the off-white page background ■#F7F8F5 by approximately 6.73:1. Make the button actually operable at the same time its appearance changes.
• Unavailable bicycle model: Rather than filling the listing with disabled-looking action buttons, show the words “Unavailable” next to the model. A pale green-gray ■#EDF2EF information surface with charcoal ■#26343D text offers about 11.30:1 contrast. Since this panel differs from the off-white page ■#F7F8F5 by only about 1.06:1, add spacing or an outline if a visible boundary is needed.

In this example, the “Review booking” button keeps the same wording in both states. What changes is whether the user has completed the required selection, the visual emphasis of the action, and whether the control can actually be activated. The explanation of the prerequisite is more informative than color alone.

Check whether disabling the action is necessary and test keyboard behavior

Do not leave people facing a permanently unavailable button with no indication of which fields they need to fix. Another valid design is to keep the action available, then show clear validation errors and correction instructions if required information is missing. If you do disable it, enable it when the prerequisites are met and announce temporary processing with wording such as “Checking availability,” rather than leaving visitors guessing.

Native disabled buttons are normally skipped during Tab navigation, so put explanations somewhere people can discover them before reaching the action. A focusable control using aria-disabled="true" may be appropriate when discoverability is important, but developers must suppress activation from clicks, Enter, and Space as well. Merely reducing opacity or changing color does not disable a control.

Test unselected, selected, unavailable, and processing states on both mobile and keyboard-only navigation. HueRoll can check a selected color against white or black, but it cannot directly compare arbitrary pairs of custom colors or automatically judge WCAG AA or AAA conformance. The custom-pair contrast values in this article were calculated separately.