Last modified: 2014-08-19 00:25:31 UTC
The thumbnail caption-text in Mobile is currently colored #777. This is quite hard to read, and will be inconsistent with planned Desktop changes. Please change it to #333. Context: The Design Team is planning a change to Desktop thumbnail-styling, that includes various border changes (which will make it consistent with Mobile), but also changing the text styling for captions. The gerrit patch includes this file, which is where the requested #333 originates. https://gerrit.wikimedia.org/r/#/c/133301/5/skins/vector/components/thumbnails.less Thanks.
Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/4h2hdeNr
consistency! wooooo!
Greys/grays have always been a mess in mobile. We created 5 LESS variables to keep the shades of grey constrained to 5. Would be great to upstream these to core, get core using them and use those.
Even better if we can use the thumbnail styling from core...
If body copy is Grey 3 perhaps we should use Grey 5 for captions.
See https://gerrit.wikimedia.org/r/#/c/117105 which is related.
@ryan does this include all the colors from https://trello.com/c/IRqbu8p4/15-color-swatches or only the grey values?
We're targeting a rerelease of the image styling consistency patch (linked above by ryan) for July 10th, it would be great to get these both using LESS Grey 5 at the same time.
@jared: I'm pretty sure it includes all the new color values, except for a few of the grey mappings like "shadow", "neutral", etc. Should I add those as well?
@Ryan, I think we should include all of the values in the trello card. If we have access to all of them we're much less (ha!) likely to need to be calling custom colors in the future.
(In reply to Ryan Kaldari from comment #6) > See https://gerrit.wikimedia.org/r/#/c/117105 which is related. Please do Not use #555 for the caption text. On Mobile or Desktop. And please do Not change the color of the Desktop body text, from #252525 to #333, (which line #54 at https://gerrit.wikimedia.org/r/#/c/117105/7/resources/src/mediawiki.ui/settings/colors.less seems to do) as the grey introduced with the Typography Refresh has been objected to, and has very little supporting evidence. https://www.mediawiki.org/wiki/Typography_refresh#Why_did_we_change_the_body_text_color.3F https://www.mediawiki.org/wiki/Talk:Typography_refresh/Archive_3#Gray_text_is_a_strain_to_the_eye https://www.mediawiki.org/wiki/Talk:Typography_refresh/Archive_2#You_are_killing_me_eyes.2C_kind_sirs Facebook uses #141823 for content. Google's Knowledge Graph uses #000 for title text and #222 for blurb text. Google docs uses #000 for body text. Dark grey text looks Fuzzy to many people. ------- If we want more contrast between body and caption, then darken the body text.
Created attachment 15719 [details] Quickcolor text
@Quiddity, I uploaded a quick color test, easier to visualize this way.
@Quiddity: I changed the text color to #222222 since that is closer to the original Typography Refresh value (#252525). Let me know if that is acceptable.
#222222 isn't a LESS value… but it could be one #222 body "Grey 2" and #555 caption "Grey 5" seems to have high contrast and be reasonably differentiated
Sorry, I meant to say I changed it to @colorGray2 (which is #222222).
(In reply to Ryan Kaldari from comment #14) > @Quiddity: I changed the text color to #222222 since that is closer to the > original Typography Refresh value (#252525). Let me know if that is > acceptable. That is great. Much thanks. (In reply to Jared Zimmerman (WMF) from comment #13) > @Quiddity, I uploaded a quick color test, easier to visualize this way. Thank you! Mockups are much easier to understand and comment on, than pure code. :) Much like the "type-size selector" that NYTimes uses (and I believe we're planning on implementing eventually) - https://i.imgur.com/7U3yAoF.png - it would be lovely to have 2 or 3 options for color-changes. This would enable us to use many more of the intriguing ideas in https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesigns#Unsolicited_redesigns_of_Wikipedia and past community discussions, without upsetting anyone by altering the global defaults in ways that will please some but dismay others. But that's something for the future. For now: * #777 is not even WCAG AA compliant, and should not be used anywhere, unless the text is huge. (cf. http://snook.ca/technical/colour_contrast/colour.html ) * #222 (body) with #555 (caption) is passable, but will result in negative reactions from large numbers of editors and readers (and positive reactions from a few). * #000 or #111 (body) with #333 (caption), would be my recommendation, for a happy release of https://gerrit.wikimedia.org/r/#/c/133301/ - That would achieve the subtle contrast that is wanted, but without making the text harder to read for people with accessibility issues (bad screens, bright backlighting, old eyes, etc). It would also improve the look of long captions with links, without having to create custom styles for links-within-captions. eg. https://en.m.wikipedia.org/wiki/Kronan_%28ship%29#Sinking
In my opinion the 000/333 combo is almost indistinguishable and doesn't provide enough differentiation between body and caption but 222/555 seems to.
Maybe #444? ;)
(In reply to Juliusz Gonera from comment #19) > Maybe #444? ;) #000/#444 would be a good thing to test. :)
000/444 r3vrod451puj67w/Screenshot%202014-06-24%2016.41.18.png">https://www.dropbox.com/s/r3vrod451puj67w/Screenshot%202014-06-24%2016.41.18.png it looks ok in swatches, but in an actual text sample, it hardly looks different
Created attachment 15720 [details] 000/444 pasted url became garbled, uploading instead
I can see the differentiation in this last mockup; I would /not/ recommend a lighter grey for the caption.
Created attachment 15822 [details] screenshot1 - 000/333
Created attachment 15823 [details] screenshot2 - 000/444
Created attachment 15824 [details] screenshot3 - 222/555
I've attached 3 screenshots, of what I see. I would prefer 000/444, and I think it looks good/reasonable. Especially so, for people who have thin fonts by default (eg me on Linux, with DejaVu Sans), or find the #222 to be 'fuzzy'. However, I gather (from discussion during meetings) that is not an option at this time. I look hopefully forward to the future option-widgets, that will let each user tweak their own experience more easily than user.css In the meantime, I guess we're going forward with 222/555.
Grey 2 body / Grey 5 caption seems to be acceptable, Quiddity, I'm looking forward to the user controllable text styling as well. but in the mean time, i think "high contrast mode" falls into the bucket of, let's not spend our time and energy recreating OS and browser functions on the site. The ability to boost contrast is available in the OS to users with extreme visual impairments, an the proposed colors are well within WCAG AAA
Change 153726 had a related patch set uploaded by JGonera: Make thumbnail caption color darker https://gerrit.wikimedia.org/r/153726
Change 153726 merged by jenkins-bot: Make thumbnail caption color darker https://gerrit.wikimedia.org/r/153726
