21

as I have been going through different references on input-field designs, I realized that people tend to flip-flop with grey or white background to indicate whether the input-field is enabled or disabled.

Does anyone know where I can find more information about this?

39

The correct terminology is Greyout.

It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.

Definition by Oxford Dictionary:

noun

Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of vision or consciousness, or partial loss of memory.

Origin

1940s; earliest use found in The Richmond Times-Dispatch. From to grey out, after blackout.

So, We can deduce that greyout comes before the blackout, the end.

  • 17
    I would say 'grayed-out' is the term people tend to use, and that 'greyout' as per your definition is not actually correct. en.wikipedia.org/wiki/Grayed_out – bushell Apr 3 at 15:58
  • 2
    here is the corresponding oxford dictionary link for @bushell 's comment: en.oxforddictionaries.com/definition/greyed-out – icc97 Apr 4 at 9:13
  • Each platform says a different thing, I found the origin in the icc97's link – Juan Jesús Millo Apr 4 at 11:38
  • The linked definition is irrelevant to UX. Greying - out options which aren't available was part of the original Apple Mac design from the 1980s. It has nothing to do with losing consciousness ! – PhillipW Apr 10 at 7:00
26

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text.

Even if you're not implementing a framework, you can incorporate its patterns into your application.

Bootstrap

Their forms section shows disabled elements:

enter image description here

Material design

They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:

enter image description here

And their Filled text fields:

enter image description here

  • 13
    It seems there is an error in the Errorr message. – bjb568 Apr 3 at 19:39
  • 2
    @bjb568 Good catch! no one is immune :) – Mike M Apr 3 at 20:25
8

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers.

The article Disabled buttons don’t have to suck!, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I altered them to apply to fields):

  • Get better contrast by using bigger font and/or darker colors;
  • Give assistive technologies, like screen readers, some information at the field, since they won’t read out information inside the disabled field (it’s often skipped).
  • Give users information when they tap, hover or click the disabled field. Or give them some other cue (e.g. through a tooltip). For example, you could give them an explanation to why the field is disabled.
8

While I'd agree with pretty much everyone else, you can do some interesting things not just with color, but with contrast:

Enabled

Disabled

A lower level of contrast will cause elements to appear faded away, much like graying out would do with black on white backgrounds. In my opinion, this makes the UI element appear out of focus. Bear in mind this solution may not be the most accessible, which is why you may need to consider the use of themes.

Additionally, you can consider hiding the element altogether. As far as UX goes, this can help reduce the cognitive load of your users, helping them to be more productive with you app. Beware that there can be drawbacks if implemented poorly. I've seen some apps that make content reappear too late and this is quite jarring.

You can learn more about the second approach by reading up on The Motion Guide for Material Design

3

What is the most common color

I would say the most common is the standard browser default:

Chrome v73

enter image description here

Firefox v66

enter image description here

using the following html:

<!DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" value="normal">
    <input disabled type="text" value="disabled">
  </body>
</html>

Older browsers

This blog post on Styling Disabled Form Fields has a good set of standardised examples across various older browsers.

Accessibility

Does anyone know where I can find more information about this?

But it's worth considering the accessibility requirements of the disabled fields, with the first question if you even need the field.

This w3c github accessibility issue has a good discussion over the various aspects around disabled inputs and has a good example of replacing a disabled input with just text which means you can keep the colour contrast. Note the Tap at least 4 more to continue button.

Before:

enter image description here

After:

enter image description here

0

The standards are color and border-related, not background-related. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused.

Some designers/ developers use lower opacity for the backgrounds/ text to highlight this state because sometimes buttons are inputs with type="submit". Also, if in the normal state inputs have also a gray background, having a gray background in the disabled state doesn't make much difference, but lower opacity could help more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.