grayedout

Grayed out is a term used in computing and user interface design to describe elements that are visually de-emphasized to indicate they are inactive or unavailable. A grayed-out control—such as a button, menu item, or option—appears with reduced brightness, desaturated color, or a lighter shade, signaling to the user that it cannot be used at the moment.

The phrase likely derives from the use of grayscale rendering to distinguish active elements from those that are not currently functional. The spelling variations gray-out, grayed-out, or greyed-out reflect differences between American and British English. In practice, a grayed-out control may still be visible to the user but cannot be interacted with until certain conditions are met, such as selecting prerequisites, meeting permissions, or enabling a related option.

In user interface design, grayed-out visuals communicate state without removing the element from the layout, preserving context. Good practice includes pairing color changes with additional cues, such as disabled text labels, tooltips, or accessibility attributes, to convey non-interactivity to users who rely on screen readers. Accessibility guidelines emphasize that color alone should not convey state; elements should also be non-focusable or programmatically disabled as appropriate.

Beyond interfaces, “grayed out” can describe images or elements that have been intentionally desaturated or converted to grayscale for stylistic or functional reasons. The term remains a common shorthand in documentation, tutorials, and discussions about interactive software.