Only read this today, but I completely agree.
Ryan Kaldari wrote:
I've noticed that the majority of designs I've seen from the design team in the past year have featured light grey text (frequently #CCCCCC) on a white background. Although I understand the need to make non-essential text less prominent, having text that is barely or not at all readable to a large percentage of the population seems like a bad idea. One of the main differences between designing for Wikipedia and designing for other sites is that Wikipedia strongly values accessibility. I know that the design team is very conscious of color-blindness in its designs, but poor vision in general is a much more common problem and should arguably be given more consideration than color-blindness.
Personally, I would suggest that we avoid using light grey on white text or grey on grey text and try to maintain a minimum level of text contrast. If that doesn't seem realistic, I would at least like to see us avoid low-contrast text at small font sizes. What are other people's thoughts on this?
Ryan Kaldari
Ditto, though I'd also like to add that it's not limited to being an issue for folks with less good eyesight, but can also cause problems for anyone else as well depending on their monitor quality/brightness. One of my computers has a screen where that kind of low-contrast stuff tends to disappear entirely, for instance, and I have seen problems with this on laptops in power-saving modes as well (these were much higher-quality screens).
(Also when/where was this from? I can't seem to find the original thread anywhere.)
On 09/11/13 07:29, Juliusz Gonera wrote:
Only read this today, but I completely agree.
Ryan Kaldari wrote:
I've noticed that the majority of designs I've seen from the design team in the past year have featured light grey text (frequently #CCCCCC) on a white background. Although I understand the need to make non-essential text less prominent, having text that is barely or not at all readable to a large percentage of the population seems like a bad idea. One of the main differences between designing for Wikipedia and designing for other sites is that Wikipedia strongly values accessibility. I know that the design team is very conscious of color-blindness in its designs, but poor vision in general is a much more common problem and should arguably be given more consideration than color-blindness.
Personally, I would suggest that we avoid using light grey on white text or grey on grey text and try to maintain a minimum level of text contrast. If that doesn't seem realistic, I would at least like to see us avoid low-contrast text at small font sizes. What are other people's thoughts on this?
Ryan Kaldari
An interesting link defending those ideas with some examples: http://contrastrebellion.com/
Pau
On Sat, Nov 9, 2013 at 9:05 AM, Juliusz Gonera jgonera@wikimedia.orgwrote:
Isarra Yos wrote:
(Also when/where was this from? I can't seem to find the original thread anywhere.)
Both mobile-tech@lists.wikimedia.org and design@lists.wikimedia.org.
-- Juliusz
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 13-11-09 12:57 AM, Pau Giner wrote:
An interesting link defending those ideas with some examples: http://contrastrebellion.com/
Pau
Awesome link, Pau. +1 for Speaking to designers in their own language. :)
For a few details (and 3 references) about why the design team doesn't use pure-black on pure-white, see https://en.wikipedia.org/wiki/Wikipedia:Flow/Design_FAQ#Why_is_the_text_grey... (Note that the current Flow prototype still needs some tweaks, before it hits this target)
For useful tools, this http://www.snook.ca/technical/colour_contrast/colour.html is linked from https://www.mediawiki.org/wiki/Accessibility_guide_for_developers
[Somewhat relatedly, I made a list of everything I could find related to color-blindness, at https://www.mediawiki.org/wiki/Talk:Accessibility#Colour-blindness_links_and... It needs to be merged into a project page somewhere, eventually.</plug>]
Quiddity
On Sat, Nov 9, 2013 at 12:57 AM, Pau Giner pginer@wikimedia.org wrote:
An interesting link defending those ideas with some examples: http://contrastrebellion.com/
I agree we should be very careful to preserve readability, but I find that site a little ridiculous. It's arguing that we don't have to sacrifice aesthetics for readability... and it's ugly as sin. "High contrast" pairings like #cfba58 on black don't help their case.
Readability is not just about contrast. In that very site, they also make controversial choices like pure white text on a pure black background, which is not universally agreed to be easy on the eyes.[1][2] Part of the reason I understand that there's been a movement away from 'pure white on black' as a standard for text is that high levels of contrast can be hard on your eyes with extended reading... such as reading long Wikipedia articles.
1. http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/ 2. en.wikipedia.org/wiki/Light-on-dark_color_scheme
On Sat, Nov 9, 2013 at 3:08 PM, Steven Walling swalling@wikimedia.org wrote:
I agree we should be very careful to preserve readability, but I find that site a little ridiculous.
It's a holy war :D
A few comparisons (solid white bg where not otherwise noted):
medium.com: #333332 for article text, #666665 for less prominent stuff like author blurbs and #b3b3b1 for metadata
quora.com #333 for main q/a text, #999 for metadata *
stackoverflow.com: solid black on solid white. yeah baby! a tiny bit of #777-#888 for some elements. *
facebook.com: #333 for feed content, #999 for metadata. **
google plus: #262626 for feed content just to be different, #999 for metadata ***
Flow: #6d6e70 for comments, solid black for headings, #aaa for metadata. Dark gray on light gray text in the topic boxes
So my sense is that Flow in particular is right now about a whole notch lower contrast than popular sites.
Cheers, Erik
* ugly ** ugly but we're used to it *** tedious and boring
On 13-11-09 03:08 PM, Steven Walling wrote:
On Sat, Nov 9, 2013 at 12:57 AM, Pau Giner <pginer@wikimedia.org mailto:pginer@wikimedia.org> wrote:
An interesting link defending those ideas with some examples: http://contrastrebellion.com/I agree we should be very careful to preserve readability, but I find that site a little ridiculous. It's arguing that we don't have to sacrifice aesthetics for readability... and it's ugly as sin. "High contrast" pairings like #cfba58 on black don't help their case.
Aesthetic choices are subjective. I like their palette, but can see how it wouldn't be universally appealing. (which is one of the reasons why we've historically gone with a grey or muted palette in Wikipedia. It turns-off the least number of people.)
Contrast (in contrast!) is objectively measurable, and #cfba58 on black is high-contrast, as checked at http://www.snook.ca/technical/colour_contrast/colour.html
Readability is not just about contrast. In that very site, they also make controversial choices like pure white text on a pure black background, which is not universally agreed to be easy on the eyes.[1][2] Part of the reason I understand that there's been a movement away from 'pure white on black' as a standard for text is that high levels of contrast can be hard on your eyes with extended reading... such as reading long Wikipedia articles.
"extended reading" is not a factor in that site, though... ;P
However, I agree with the general point, and i think the creators of contrastrebellion would too, but they concentrated on knocking down the target (http://contrastrebellion.com/public/images/page2-img1.jpg), and didn't go into the tangential topics of very-high-contrast-in-large-quantities, or color blindness.
Personally, I've occasionally used the "zap white backgrounds" bookmarklet (adapted to use a light grey) found here https://www.squarefree.com/bookmarklets/zap.html for many years. Though usually if I start to get eyestrain from reading too much Wikipedia, that's a sign that I'm overdue for a stand&stretch, or I need to adjust my room's lighting. :)
http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/ 2. en.wikipedia.org/wiki/Light-on-dark_color_scheme http://en.wikipedia.org/wiki/Light-on-dark_color_scheme
-- Steven Walling, Product Manager https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I think that both extremes have negative consequences.
Contrast is a tool for making more/less prominent what it is more/less important. If you make everything high contrast, or use a very similar grey palette for all text it becomes hard to communicate what it is more important and help users to perceive the visual hierarchy. Thus, the perceived complexity is increased.
they also make controversial choices like pure white text on a pure black
background
Agree. Another interesting link on why to avoid pure black: http://ianstormtaylor.com/design-tip-never-use-black/
On Sun, Nov 10, 2013 at 2:38 AM, Quiddity pandiculation@gmail.com wrote:
On 13-11-09 03:08 PM, Steven Walling wrote:
On Sat, Nov 9, 2013 at 12:57 AM, Pau Giner <pginer@wikimedia.org mailto:pginer@wikimedia.org> wrote:
An interesting link defending those ideas with some examples: http://contrastrebellion.com/I agree we should be very careful to preserve readability, but I find that site a little ridiculous. It's arguing that we don't have to sacrifice aesthetics for readability... and it's ugly as sin. "High contrast" pairings like #cfba58 on black don't help their case.
Aesthetic choices are subjective. I like their palette, but can see how it wouldn't be universally appealing. (which is one of the reasons why we've historically gone with a grey or muted palette in Wikipedia. It turns-off the least number of people.)
Contrast (in contrast!) is objectively measurable, and #cfba58 on black is high-contrast, as checked at http://www.snook.ca/technical/ colour_contrast/colour.html
Readability is not just about contrast. In that very site, they also
make controversial choices like pure white text on a pure black background, which is not universally agreed to be easy on the eyes.[1][2] Part of the reason I understand that there's been a movement away from 'pure white on black' as a standard for text is that high levels of contrast can be hard on your eyes with extended reading... such as reading long Wikipedia articles.
"extended reading" is not a factor in that site, though... ;P
However, I agree with the general point, and i think the creators of contrastrebellion would too, but they concentrated on knocking down the target (http://contrastrebellion.com/public/images/page2-img1.jpg), and didn't go into the tangential topics of very-high-contrast-in-large-quantities, or color blindness.
Personally, I've occasionally used the "zap white backgrounds" bookmarklet (adapted to use a light grey) found here https://www.squarefree.com/ bookmarklets/zap.html for many years. Though usually if I start to get eyestrain from reading too much Wikipedia, that's a sign that I'm overdue for a stand&stretch, or I need to adjust my room's lighting. :)
http://uxmovement.com/content/when-to-use-white-text-on-a- dark-background/ 2. en.wikipedia.org/wiki/Light-on-dark_color_scheme http://en.wikipedia.org/wiki/Light-on-dark_color_scheme
-- Steven Walling, Product Manager https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 10/11/13 10:01, Pau Giner wrote:
I think that both extremes have negative consequences.
Contrast is a tool for making more/less prominent what it is more/less important. If you make everything high contrast, or use a very similar grey palette for all text it becomes hard to communicate what it is more important and help users to perceive the visual hierarchy. Thus, the perceived complexity is increased.
they also make controversial choices like pure white text on a pure black backgroundAgree. Another interesting link on why to avoid pure black: http://ianstormtaylor.com/design-tip-never-use-black/
Amusingly, the text there is too light to be comfortably read, at least on my screen.
Really, though, it strikes me as a case of taking a thing too far. You do need to be careful when to use black, but there are also some pretty clear times when it is appropriate, and it comes down to the same principle of context as anything else, or any other colour. With painting, shadows are a particularly strange example. They're almost never black unless the objects in shadow are black, sure, but thinking in terms of shadow colour instead of the colours of the things in shadow doesn't make sense for precisely that reason. All objects have their own colours, but it's the bits in light that stand out - they're the significantly brighter versions of the object colours, or the tinted versions if it's a coloured light. We only use black shadows in more abstract design because... well, why do we? Because we don't have real light sources/colours? Because we can't think in raytracing terms with everything? Just imagine a future when all our 2D interfaces are rendered by raytracing so they have exactly precise lighting, even matching the external lighting conditions...
More to the point, I do find it a bit odd that folks are so afraid of black on white just in principle. How harsh is it really, with a good renderer? For issues of eye strain and such, is that really because of the palette? Or do perhaps the antialiasing, font itself, or size and boldness of the text have as much to do with it?
I agree that this maybe be being taken to far. There's a time and a place for low-contrast smaller text, but certainly there are limits as well. It's mostly valuable for short labels containing non-critical information and the value it offers is, as Pau mentioned, communicating the difference of importance and priority of information on a page. Certainly the examples on the contrastreblion site are bad, but I don't think we were ever considering making the text content of our pages #CCCCCC.
I think the simple answer is "you better have a really good reason if you are using really light text on pure white". Probably best to limit it to #555 or so.
- Trevor
On Sun, Nov 10, 2013 at 11:07 AM, Isarra Yos zhorishna@gmail.com wrote:
On 10/11/13 10:01, Pau Giner wrote:
I think that both extremes have negative consequences.
Contrast is a tool for making more/less prominent what it is more/less important. If you make everything high contrast, or use a very similar grey palette for all text it becomes hard to communicate what it is more important and help users to perceive the visual hierarchy. Thus, the perceived complexity is increased.
they also make controversial choices like pure white text on a pure
black background
Agree. Another interesting link on why to avoid pure black: http://ianstormtaylor.com/design-tip-never-use-black/
Amusingly, the text there is too light to be comfortably read, at least on my screen.
Really, though, it strikes me as a case of taking a thing too far. You do need to be careful when to use black, but there are also some pretty clear times when it is appropriate, and it comes down to the same principle of context as anything else, or any other colour. With painting, shadows are a particularly strange example. They're almost never black unless the objects in shadow are black, sure, but thinking in terms of shadow colour instead of the colours of the things in shadow doesn't make sense for precisely that reason. All objects have their own colours, but it's the bits in light that stand out - they're the significantly brighter versions of the object colours, or the tinted versions if it's a coloured light. We only use black shadows in more abstract design because... well, why do we? Because we don't have real light sources/colours? Because we can't think in raytracing terms with everything? Just imagine a future when all our 2D interfaces are rendered by raytracing so they have exactly precise lighting, even matching the external lighting conditions...
More to the point, I do find it a bit odd that folks are so afraid of black on white just in principle. How harsh is it really, with a good renderer? For issues of eye strain and such, is that really because of the palette? Or do perhaps the antialiasing, font itself, or size and boldness of the text have as much to do with it?
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design