What is the most common color to indicate the input-field is disabled?Is this hard to read?Coming soon pages...
Why are 150k or 200k jobs considered good when there are 300k+ births a month?
Can town administrative "code" overule state laws like those forbidding trespassing?
If Manufacturer spice model and Datasheet give different values which should I use?
Is it legal to have the "// (c) 2019 John Smith" header in all files when there are hundreds of contributors?
Is it possible to make sharp wind that can cut stuff from afar?
A Journey Through Space and Time
How to use Pandas to get the count of every combination inclusive
Shell script can be run only with sh command
DOS, create pipe for stdin/stdout of command.com(or 4dos.com) in C or Batch?
Are white and non-white police officers equally likely to kill black suspects?
Why is "Reports" in sentence down without "The"
I see my dog run
Non-Jewish family in an Orthodox Jewish Wedding
Why is the design of haulage companies so “special”?
Can Medicine checks be used, with decent rolls, to completely mitigate the risk of death from ongoing damage?
How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?
cryptic clue: mammal sounds like relative consumer (8)
Extreme, but not acceptable situation and I can't start the work tomorrow morning
Copenhagen passport control - US citizen
Why does not dark matter gather and form celestial bodies?
Download, install and reboot computer at night if needed
How is it possible for user's password to be changed after storage was encrypted? (on OS X, Android)
What is the logic behind how bash tests for true/false?
I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine
What is the most common color to indicate the input-field is disabled?
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 display disabled field and text for accessibility color contrast supportWhat is the best way to categorize or represent a list of top-level domains (TLDs)?Using hue/saturation to represent multiple dimensionsLogin system for anonymous crime reporting serviceColor 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?
input-fields color
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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?
input-fields color
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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?
input-fields color
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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?
input-fields color
input-fields color
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Apr 2 at 13:30
ec1234ec1234
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Apr 2 at 13:30
ec1234ec1234
10915
asked Apr 2 at 13:30
ec1234ec1234
10915
10915
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
5 Answers
5
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
15
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
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
11.5k12433
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
11.5k12433
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 |
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
});
}
});
ec1234 is a new contributor. Be nice, and check out our Code of Conduct.
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
5 Answers
5
active
oldest
votes
5 Answers
5
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
15
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
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
15
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
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
637110
answered Apr 2 at 13:45
Juan Jesús MilloJuan Jesús Millo
637110
637110
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
15
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
add a comment |
15
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
15
15
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
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
11.5k12433
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
11.5k12433
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
11.5k12433
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
11.5k12433
answered Apr 2 at 13:42
Mike MMike M
11.5k12433
answered Apr 2 at 13:42
Mike MMike M
11.5k12433
answered Apr 2 at 13:42
Mike MMike M
11.5k12433
11.5k12433
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
11.5k12433
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
11.5k12433
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
11.5k12433
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
11.5k12433
answered Apr 2 at 16:07
AlineAline
1,050315
edited Apr 2 at 21:12
Mike M
11.5k12433
edited Apr 2 at 21:12
Mike M
11.5k12433
edited Apr 2 at 21:12
Mike M
11.5k12433
11.5k12433
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 |
ec1234 is a new contributor. Be nice, and check out our Code of Conduct.
ec1234 is a new contributor. Be nice, and check out our Code of Conduct.
ec1234 is a new contributor. Be nice, and check out our Code of Conduct.
ec1234 is a new contributor. Be nice, and check out our Code of Conduct.
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
