User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
Their forms section shows disabled elements:
They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:
And their Filled text fields:
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):
While I'd agree with pretty much everyone else, you can do some interesting things not just with color, but with contrast:
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
What is the most common color
I would say the most common is the standard browser default:
using the following html:
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" value="normal">
<input disabled type="text" value="disabled">
</body>
</html>
This blog post on Styling Disabled Form Fields has a good set of standardised examples across various older browsers.
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:
After:
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.
