grayout

Grayout is a user interface concept in which an element is rendered in a muted, grayish appearance to indicate that it is inactive, unavailable, or not currently usable. The grayed state signals to users that a control or option cannot be interacted with, usually because required conditions have not been met or due to contextual restrictions. The term is commonly used as a noun and verb: a control appears grayed out, and developers may gray out elements to convey their inoperability.

Origins of the term come from the broader phrase grey out; in practice, a grayed-out item typically differs from hidden or removed items in that it remains visible but non-interactive. In software design, grayouts are often implemented by reducing color saturation, lowering contrast, or applying a disabled style such as reduced opacity. Form controls may also be programmatically disabled, which in turn triggers a default disabled visual state and prevents user interaction.

Accessibility considerations suggest that color alone should not communicate the state; screen readers, tooltips, or explicit text should accompany grayouted controls. Common contexts include desktop and mobile applications, websites, and game menus, where options become grayouted to reflect prerequisites, licensing, or insufficient input. While graying out is a helpful cue, it can also obscure information if overused or poorly contrasted; designers should ensure that non-active elements remain legible and that the user understands why an option is unavailable.

See also: grey-out, disabled state, UI accessibility, disabled button.