This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent. - Trevor On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari <rkaldari(a)wikimedia.org> wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

I'm confident she will come up with something sensible. - Trevor On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman(a)wikimedia.org&gt; wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons <http://tools.wmflabs.org/styleguide/desktop/section-2.html>. If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value? [image: Inline image 2] On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal &lt;tparscal(a)wikimedia.org&gt; wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text. @colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest @colorDisabledText: @colorGray12; On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal &lt;tparscal(a)wikimedia.org&gt; wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

I was looking for a background color that has as little contrast as possible with #CCC. Important to have the border show but not dark enough that when it stands alone, it looks like an active checkbox. I made a version with #F9F9F9. What do you guys think? [image: Inline image 1] On Tue, Aug 19, 2014 at 12:55 PM, Trevor Parscal &lt;tparscal(a)wikimedia.org&gt; wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Side note: how does/ought a checkbox that is both checked and disabled look? I haven't skinned a checkbox since Mac OS 9, but my experience from then involved creating checked and unchecked versions of disabled, normal, and active checkboxes, and I haven't seen any examples of disabled checked ones here. Is the checkmark still bright green on disabled checkboxes?

The problem I have here is that if I allow my eyes to blur a bit with the image at the expected resolution (half the size of the screenshot), it appears as a grey smudge. I'm only aware that there is a control there because I know there's supposed to be one.

I recommend using @colorDisabledText for the label, and @colorGray15 for the fill. On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson &lt;jrobson(a)wikimedia.org <mailto:jrobson@wikimedia.org>> wrote: MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text. @colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest @colorDisabledText: @colorGray12; On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal &lt;tparscal(a)wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close. - Trevor On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway &lt;mgalloway(a)wikimedia.org <mailto:mgalloway@wikimedia.org>> wrote: I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons <http://tools.wmflabs.org/styleguide/desktop/section-2.html>. If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value? Inline image 2 On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal &lt;tparscal(a)wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: I'm confident she will come up with something sensible. - Trevor On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman &lt;jared.zimmerman(a)wikimedia.org <mailto:jared.zimmerman@wikimedia.org>> wrote: Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize. * * * * *Jared Zimmerman *\\Director of User Experience \\Wikimedia Foundation M +1 415 609 4043 <tel:%2B1%C2%A0415%20609%204043> \\ @jaredzimmerman <http://loo.ms/g0> On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal &lt;tparscal(a)wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: This is what it looks like when the checkbox uses #ddd instead of "lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent. - Trevor On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari &lt;rkaldari(a)wikimedia.org <mailto:rkaldari@wikimedia.org>> wrote: Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill. I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it. Thanks! Ryan Kaldari _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M +1 415 609 4043 \\ @jaredzimmerman <http://loo.ms/g0> On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson &lt;jrobson(a)wikimedia.org&gt; wrote: _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Jared Zimmerman wrote: I'd also argue that we need fewer grays. Surely fifteen grays is overkill. I think enumerating the grays was kind of a cop-out. We should be able to clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it probably doesn't need to be part of the palette. For now, we can side-step the fact that most of these colors are indistinguishable on the hardware that many users use (both human eyes and computer monitors). :-) MZMcBride _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

One thing at a time. We are building software and we can't get everything right first time :) I agree semantic names are what we should aim to but the purpose of the numeric colours was an attempt to at least stop introducing even more :) Sounds like we have identified disabledComponentGray to go with disabledTextGray during this process:) On 19 Aug 2014 16:32, "Jared Zimmerman" &lt;jared.zimmerman(a)wikimedia.org&gt; wrote: colors, and numerical names for our limited grey palette. The Living style guide will outline some uses for each grey but they will be divergent enough that a single name is not likely to make sense. If when we are building the color usage section of the living style guide we find enough commonality in usages for the shades of grey we can revisit semantic names. well, everything. overkill. to probably fact many _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design