What is the most common color to indicate the input-field is disabled? Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Is this hard to read?Coming soon pages - best practices?Intuitive colour pickers for non-expert users?How do users react to Bootstrap's uneditable-input class?Why do so many forms use input masks in for input fields?What is the best way to categorize or represent a list of top-level domains (TLDs)?UI elements indicating correctness of textual user inputLogin system for anonymous crime reporting servicedisabled field with help iconColor Palette Accessibility for White Text Button Labels
What's the meaning of "fortified infraction restraint"?
How do I find out the mythology and history of my Fortress?
How to tell that you are a giant?
Is grep documentation about ignoring case wrong, since it doesn't ignore case in filenames?
How would a mousetrap for use in space work?
Generate an RGB colour grid
Chinese Seal on silk painting - what does it mean?
Is there hard evidence that the grant peer review system performs significantly better than random?
An adverb for when you're not exaggerating
Can a new player join a group only when a new campaign starts?
What do you call the main part of a joke?
Crossing US/Canada Border for less than 24 hours
Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?
Project Euler #1 in C++
Why is it faster to reheat something than it is to cook it?
QGIS: how to apply Line Pattern Fill to LineStrings?
Why did Roosevelt decide to implement a maximum wage through taxation rather than a simple ceiling?
Is it a good idea to use CNN to classify 1D signal?
Withdrew £2800, but only £2000 shows as withdrawn on online banking; what are my obligations?
Did MS DOS itself ever use blinking text?
Is there a kind of relay only consumes power when switching?
Denied boarding although I have proper visa and documentation. To whom should I make a complaint?
Do wooden building fires get hotter than 600°C?
Does the Weapon Master feat grant you a fighting style?
What is the most common color to indicate the input-field is disabled?
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Is this hard to read?Coming soon pages - best practices?Intuitive colour pickers for non-expert users?How do users react to Bootstrap's uneditable-input class?Why do so many forms use input masks in for input fields?What is the best way to categorize or represent a list of top-level domains (TLDs)?UI elements indicating correctness of textual user inputLogin system for anonymous crime reporting servicedisabled field with help iconColor Palette Accessibility for White Text Button Labels
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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?
forms input-fields color disabled
edited Apr 13 at 7:03
Madalina Taina
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
add a comment |
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?
forms input-fields color disabled
edited Apr 13 at 7:03
Madalina Taina
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
add a comment |
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?
forms input-fields color disabled
edited Apr 13 at 7:03
Madalina Taina
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
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?
forms input-fields color disabled
forms input-fields color disabled
edited Apr 13 at 7:03
Madalina Taina
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
edited Apr 13 at 7:03
Madalina Taina
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
edited Apr 13 at 7:03
Madalina Taina
3,10911135
edited Apr 13 at 7:03
Madalina Taina
3,10911135
edited Apr 13 at 7:03
Madalina Taina
3,10911135
3,10911135
asked Apr 2 at 13:30
ec1234ec1234
11415
asked Apr 2 at 13:30
ec1234ec1234
11415
asked Apr 2 at 13:30
ec1234ec1234
11415
11415
add a comment |
add a comment |
6 Answers
6
active
oldest
votes
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.
edited Apr 2 at 18:43
Emile Bergeron
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
16
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
add a comment |
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:
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:
And their Filled text fields:
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
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
add a comment |
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.
edited Apr 2 at 21:12
Mike M
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
add a comment |
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
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
add a comment |
What is the most common color
I would say the most common is the standard browser default:
Chrome v73
Firefox v66
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:
After:
answered Apr 4 at 9:00
icc97icc97
6,8381830
add a comment |
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.
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124813%2fwhat-is-the-most-common-color-to-indicate-the-input-field-is-disabled%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
edited Apr 2 at 18:43
Emile Bergeron
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
16
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
add a comment |
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.
edited Apr 2 at 18:43
Emile Bergeron
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
16
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
add a comment |
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.
edited Apr 2 at 18:43
Emile Bergeron
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
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.
edited Apr 2 at 18:43
Emile Bergeron
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
edited Apr 2 at 18:43
Emile Bergeron
1033
edited Apr 2 at 18:43
Emile Bergeron
1033
edited Apr 2 at 18:43
Emile Bergeron
1033
1033
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
682113
682113
16
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
add a comment |
16
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
16
16
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
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
2
here is the corresponding oxford dictionary link for @bushell 's comment: en.oxforddictionaries.com/definition/greyed-out
– icc97
Apr 4 at 9:13
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
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
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
add a comment |
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:
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:
And their Filled text fields:
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
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
add a comment |
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:
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:
And their Filled text fields:
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
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
add a comment |
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:
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:
And their Filled text fields:
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
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:
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:
And their Filled text fields:
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
answered Apr 2 at 13:42
Mike MMike M
12.5k12736
12.5k12736
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
add a comment |
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
13
13
It seems there is an error in the Errorr message.
– bjb568
Apr 3 at 19:39
It seems there is an error in the Errorr message.
– bjb568
Apr 3 at 19:39
2
2
@bjb568 Good catch! no one is immune :)
– Mike M
Apr 3 at 20:25
@bjb568 Good catch! no one is immune :)
– Mike M
Apr 3 at 20:25
add a comment |
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.
edited Apr 2 at 21:12
Mike M
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
add a comment |
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.
edited Apr 2 at 21:12
Mike M
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
add a comment |
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.
edited Apr 2 at 21:12
Mike M
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
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.
edited Apr 2 at 21:12
Mike M
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
edited Apr 2 at 21:12
Mike M
12.5k12736
edited Apr 2 at 21:12
Mike M
12.5k12736
edited Apr 2 at 21:12
Mike M
12.5k12736
12.5k12736
answered Apr 2 at 16:07
AlineAline
1,050315
answered Apr 2 at 16:07
AlineAline
1,050315
answered Apr 2 at 16:07
AlineAline
1,050315
1,050315
add a comment |
add a comment |
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
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
add a comment |
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
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
add a comment |
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
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
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
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
answered Apr 3 at 2:14
Nick MillerNick Miller
42849
42849
add a comment |
add a comment |
What is the most common color
I would say the most common is the standard browser default:
Chrome v73
Firefox v66
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:
After:
answered Apr 4 at 9:00
icc97icc97
6,8381830
add a comment |
What is the most common color
I would say the most common is the standard browser default:
Chrome v73
Firefox v66
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:
After:
answered Apr 4 at 9:00
icc97icc97
6,8381830
add a comment |
What is the most common color
I would say the most common is the standard browser default:
Chrome v73
Firefox v66
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:
After:
answered Apr 4 at 9:00
icc97icc97
6,8381830
What is the most common color
I would say the most common is the standard browser default:
Chrome v73
Firefox v66
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:
After:
answered Apr 4 at 9:00
icc97icc97
6,8381830
edited Apr 4 at 9:34
answered Apr 4 at 9:00
icc97icc97
6,8381830
answered Apr 4 at 9:00
icc97icc97
6,8381830
answered Apr 4 at 9:00
icc97icc97
6,8381830
6,8381830
add a comment |
add a comment |
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.
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
add a comment |
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.
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
add a comment |
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.
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
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.
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
answered Apr 10 at 3:12
Madalina TainaMadalina Taina
3,10911135
3,10911135
add a comment |
add a comment |
Thanks for contributing an answer to User Experience Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124813%2fwhat-is-the-most-common-color-to-indicate-the-input-field-is-disabled%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
