6 ms·

The Contrast Rebellion

86 points by jansho 9y ago

SerLava 9y ago
I've still never figured out why Hacker News gradually turns down the contrast when something gets downvoted. It's the worst possible way to represent it. Absolutely frustrating. Even though downvoted comments usually are inflammatory, sometimes I want to read the damn thing so that the rebuttals make sense. And then every Ask HN is low-contrast. Why?
- Analemma_ 9y ago
  The Ask HN thing is so bizarre. For the longest time I thought everyone just hated Ask HNs and so immediately downvoted them.
  - jansho 9y ago
    > The Ask HN thing is so bizarre Agreed. Second bit though, you just jump on the bandwagon?
    - nicky0 9y ago
      You misread it.
- Jare 9y ago
  I personally like the progressive unreadability of downvoted posts, the semantics are perfect. If for some reason I'm curious about what they say (normally triggered by some answer) then I do the mouse select thing to read them. The Ask HN makes no sense.
  - alanh 9y ago
    I think the semantics are good too, but it is still problematic. And note that selecting doesn’t really enhance contrast on Macs.
  - pasquinelli 9y ago
    The lowered contrast is a screaming invitation to highlight it myself. Making the text deviate from the rest makes it more noticable, and making me work to see what it says forces me to engage with it in a way I don't usually engage with text. But I think it works. It serves as an advertisement for what sort of talk is discouraged by the community.
- eslaught 9y ago
  It's not specific to Ask; any text post (as opposed to a URL post) will have grey text. I believe this is to encourage people to post links instead of text, though arguably now that Ask and Show have dedicated front pages they should get special treatment.
- a3n 9y ago
  The solution to that is to triple-click a paragraph and read it in reverse contrast; it's fine. The reason for ask HN and other text submissions is explained somewhere on HN, it's to not give the original post an advantage over the comments. (Whether you agree with that policy is a legitimate debate, but that's the reason.) The solution is the same, triple-click.
dasil003 9y ago
Good to see the date on this is 2011, because back then low-contrast was a major design trend. These days? It still happens, but it's nothing like it was.
a3n 9y ago
> When making the contrast of the text lower and lower... designers need to think of > elderly users with bad vision > low quality monitors > bad lighting and glare > reading on tiny screens And easily pissed off curmudgeons like myself. I immediately hit "No Styles" at the slightest visual irritation; low contrast is the most common. I'll do this many times in a day, with a satisfied, grumbled "harumph." I suppose that I, a mere reader/user, am at the end of the line of stakeholders, with the purchasing/contracting manager at the front, and I suppose "oooh" helps get a lot of contracts signed. So good for you, I wish you well, and it's easy enough to erase all your hard work and go directly to 1992 black text on white with obvious blue/purple links. You can do this in Firefox as: View/Page Style/No Style. My favorite Firefox addon, making it one click: Disable Style Button https://addons.mozilla.org/en-US/firefox/addon/disable-style-button/?src=search https://addons.mozilla.org/en-US/firefox/addon/disable-style... I enjoy a nicely styled, pleasant site, but I only read about 80% of them as-is.
- CaptSpify 9y ago
  Another couple of things that I do: I disable javascript, and I use ublock-origin's element picker to hide what I don't want to see. A normal webpage: https://blog.thekyel.com/entries/before_bullshit.png https://blog.thekyel.com/entries/before_bullshit.png The same page when I'm done with it: https://blog.thekyel.com/entries/after_bullshit.png https://blog.thekyel.com/entries/after_bullshit.png I sync those templates across my computers for sites I visit often. Makes them much more readable/useable.
  - lowmagnet 9y ago
    You might want to style that after a little following Butterick's advice. Specifically for legibility and flow. It's amazing what line length, font size, and a few other choices help. http://practicaltypography.com/typography-in-ten-minutes.html http://practicaltypography.com/typography-in-ten-minutes.htm...
- mrob 9y ago
  Not only does disabling CSS styles fix bad design, it often fixes websites that refuse to render when JavaScript is disabled. I also use "No Style" frequently.
pmoriarty 9y ago
This is one of the many reasons I prefer to surf the web through emacs-w3m, in my terminal. All the cute design crap is removed, and I'm given direct access to pure information, functionally displayed. Unfortunately it doesn't work with Javascript, so some sites don't work. But surprisingly many (including HN and Wikipedia) do.
eweise 9y ago
The no contrast movement has hit restaurant menus. Between the lighting and the menu, there is just no hope in reading them if I forget reading glasses.
mrob 9y ago
Despite claiming to promote high contrast text, this website is medium contrast at best. Their "black" text is #191919, not #000000 as it should be. Printer toner and carbon black based inks are frequently darker than #000000 on a typical screen, and nobody complains about them being too dark. In the case of white being darker than #ffffff, you can at least argue that most users have their monitors configured too bright (it's too bright by default because that looks better for a short term comparison, and most people don't change the defaults), so darker whites are compensating for that. There's no good reason to make black text gray.
- lnanek2 9y ago
  I agree and prefer black blacks. It's very common in design books to say that's an absolute no-no, however. So graphics people must think it looks better somehow.
  - mrob 9y ago
    Even for body text? I've seen advice that titles should be gray, but that's to make it subjectively match black body text, because bigger text looks darker.
  - mallaidh 9y ago
    Funny how that changes all of a sudden, with the whole history of printing being an effort to get as close as possible to perfectly black ink on perfectly white paper.
- alanh 9y ago
  So wrong. #191919 is very high contrast. Many/most sites use #333 for the text most of us perceive as "black". You can also check contrast ratios on a number of sites and you will see that #191919 & #fff make a pair that pass all guidelines at all text sizes.
singularity2001 9y ago
... then what. I tried to click "Join the Rebellion!" Nothing happened. maybe they should start the “Unclickable link revolution”
alanfranzoni 9y ago
Ironically,i find that website slightly unreadable because of very small text font.
- stared 9y ago
  Text fonts can be easily fixed with [Ctrl/Cmd]+[+]. There is similarly easy move for contrast.
  - lgas 9y ago
    What is it, please? I've googled and found nothing (except for Chrome Plugins that offer to do the same thing, issue trackers for adding high contrast mode to ChromeOS, etc).
OliverJones 9y ago
Yes. What they are saying. Please. Also, print and physical media that's low contrast and/or tiny in size is stupid. Most internet-of-things devices, most BD players, TVs, monitors, etc, I'm looking at you, or at least trying to. Lots of hipster-era print pieces, I'm trying to look at you too. Also, let me throw in the point that blue-on-black, or yellow-on-white, contrast is hostile to the human visual system, especially in low light. The human eyes' lenses have a smaller circle of confusion (optical jargon) for longer wavelength light. Blue emergency lights on cop cars: couldn't be worse for visibility and dark adaption if they tried. Red please!
userbinator 9y ago
My long-standing theory on why this started is because the default brightness/contrast on monitors is usually far too high for the average environment --- they may look great sitting on the (often also brightly-lit) store shelf, but are eye-wateringly unbearable in the typical office or home. Thus designers started reducing contrast in a sort of software workaround to what is actually a hardware problem, and those of us who adjust our displays for more comfortable viewing get unreadably low contrast. My monitors are set to only 12% contrast/10% brightness on one and 20/30 on the (slightly older) other to compensate for wear, and it's plenty enough. It's also probably better for longevity to not be driving the backlight at full intensity.
metasean 9y ago
I find these tools to be really useful in evaluating designs and emphasizing to stakeholders where designs fall according to standards: - http://www.checkmycolours.com/ http://www.checkmycolours.com/ - https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 https://snook.ca/technical/colour_contrast/colour.html#fg=33... --- edit: adding extra lines to get proper line breaks
- thinkxl 9y ago
  Some more: - http://webaim.org/resources/contrastchecker/ http://webaim.org/resources/contrastchecker/ (great tool) - https://24ways.org/2012/colour-accessibility/ https://24ways.org/2012/colour-accessibility/ - https://www.viget.com/articles/color-contrast https://www.viget.com/articles/color-contrast
justin_vanw 9y ago
I found this site to hurt my eyes and left me with really bad after images. It's dusk here and I haven't turned the lights on yet, maybe that is why, but I really prefer mild contrast when reading or I end up having striped after images and floaters become very noticeable. Maybe the nice looking sites aren't so bad, and people who disagree can just override the settings (very easy in browsers), like has been possible since windows 3.1.
- jansho 9y ago
  I'm mostly in the high contrast camp but in low lighting situations, I have to agree with you. I hit the "Night Shift" button on my iPhone, or flux when on laptop. https://justgetflux.com/ https://justgetflux.com/
- bo1024 9y ago
  As someone else posted, maybe your hardware's brightness is too high?
kbutler 9y ago
It's a pretty common design meme to "not use pure black" (e.g., https://ianstormtaylor.com/design-tip-never-use-black/ https://ianstormtaylor.com/design-tip-never-use-black/) or "not use pure white". What these designers appear not to realize, is that you are going to be viewing these designs on a light-emitting device, or at least a light-reflecting surface. None of these can actually produce a "pure black" (which would be no light at all) or "pure white". Even NASA only gets close: https://www.nasa.gov/topics/technology/features/super-black-material.html https://www.nasa.gov/topics/technology/features/super-black-... So designers can say that #000 is too dark, or that #fff is too light, but calling them pure black or pure white, is just inaccurate.
- deleted 9y ago
  [deleted]
ensiferum 9y ago
and what good is that page when the font size is unreadably small?
angersock 9y ago
If you don't like low-contrast, perhaps check out jwz.org or angersock.com
chris_st 9y ago
Man, I wish presenters at conferences would learn this. Really, just that they'd learn that the contrast range on their laptop is huge compared to the contrast range on the projector that everyone else is looking at, especially when you're far from the screen. Surprisingly (to me) I saw really-light-blue-text-on-white as well as the hipster-dark-colors-on-black at the last conference I was at. Neither was legible...
CalChris 9y ago
Solarized [1] is a contrast offender. There are things that I like about Solarized especially having a consistent palette across applications. But reducing contrast, especially for comments, leads to eyestrain. His 'content tones' are all reduced contrast with respect to background, between 45-65 L*. And his background black isn't 0 and I'm not sure why. [1] http://ethanschoonover.com/solarized http://ethanschoonover.com/solarized
loxias 9y ago
This is not a "rebellion". This is common sense. :)
z3t4 9y ago
you should design to make the content digestive. but if the content is bad you can make it look good and it will still sell.
woodandsteel 9y ago
This is one reason I love Firefox's Reader View button.
dzhiurgis 9y ago
Somewhat ironically this page has awful scrolling performance...

86 points by jansho 9y ago

I've still never figured out why Hacker News gradually turns down the contrast when something gets downvoted. It's the worst possible way to represent it. Absolutely frustrating. Even though downvoted comments usually are inflammatory, sometimes I want to read the damn thing so that the rebuttals make sense. And then every Ask HN is low-contrast. Why?

Analemma_ 9y ago
The Ask HN thing is so bizarre. For the longest time I thought everyone just hated Ask HNs and so immediately downvoted them.
- jansho 9y ago
  > The Ask HN thing is so bizarre Agreed. Second bit though, you just jump on the bandwagon?
  - nicky0 9y ago
    You misread it.
Jare 9y ago
I personally like the progressive unreadability of downvoted posts, the semantics are perfect. If for some reason I'm curious about what they say (normally triggered by some answer) then I do the mouse select thing to read them. The Ask HN makes no sense.
- alanh 9y ago
  I think the semantics are good too, but it is still problematic. And note that selecting doesn’t really enhance contrast on Macs.
- pasquinelli 9y ago
  The lowered contrast is a screaming invitation to highlight it myself. Making the text deviate from the rest makes it more noticable, and making me work to see what it says forces me to engage with it in a way I don't usually engage with text. But I think it works. It serves as an advertisement for what sort of talk is discouraged by the community.
eslaught 9y ago
It's not specific to Ask; any text post (as opposed to a URL post) will have grey text. I believe this is to encourage people to post links instead of text, though arguably now that Ask and Show have dedicated front pages they should get special treatment.
a3n 9y ago
The solution to that is to triple-click a paragraph and read it in reverse contrast; it's fine. The reason for ask HN and other text submissions is explained somewhere on HN, it's to not give the original post an advantage over the comments. (Whether you agree with that policy is a legitimate debate, but that's the reason.) The solution is the same, triple-click.

dasil003 9y ago

Good to see the date on this is 2011, because back then low-contrast was a major design trend. These days? It still happens, but it's nothing like it was.

a3n 9y ago

> When making the contrast of the text lower and lower... designers need to think of > elderly users with bad vision > low quality monitors > bad lighting and glare > reading on tiny screens And easily pissed off curmudgeons like myself. I immediately hit "No Styles" at the slightest visual irritation; low contrast is the most common. I'll do this many times in a day, with a satisfied, grumbled "harumph." I suppose that I, a mere reader/user, am at the end of the line of stakeholders, with the purchasing/contracting manager at the front, and I suppose "oooh" helps get a lot of contracts signed. So good for you, I wish you well, and it's easy enough to erase all your hard work and go directly to 1992 black text on white with obvious blue/purple links. You can do this in Firefox as: View/Page Style/No Style. My favorite Firefox addon, making it one click: Disable Style Button https://addons.mozilla.org/en-US/firefox/addon/disable-style-button/?src=search https://addons.mozilla.org/en-US/firefox/addon/disable-style... I enjoy a nicely styled, pleasant site, but I only read about 80% of them as-is.

CaptSpify 9y ago
Another couple of things that I do: I disable javascript, and I use ublock-origin's element picker to hide what I don't want to see. A normal webpage: https://blog.thekyel.com/entries/before_bullshit.png https://blog.thekyel.com/entries/before_bullshit.png The same page when I'm done with it: https://blog.thekyel.com/entries/after_bullshit.png https://blog.thekyel.com/entries/after_bullshit.png I sync those templates across my computers for sites I visit often. Makes them much more readable/useable.
- lowmagnet 9y ago
  You might want to style that after a little following Butterick's advice. Specifically for legibility and flow. It's amazing what line length, font size, and a few other choices help. http://practicaltypography.com/typography-in-ten-minutes.html http://practicaltypography.com/typography-in-ten-minutes.htm...
mrob 9y ago
Not only does disabling CSS styles fix bad design, it often fixes websites that refuse to render when JavaScript is disabled. I also use "No Style" frequently.

pmoriarty 9y ago

This is one of the many reasons I prefer to surf the web through emacs-w3m, in my terminal. All the cute design crap is removed, and I'm given direct access to pure information, functionally displayed. Unfortunately it doesn't work with Javascript, so some sites don't work. But surprisingly many (including HN and Wikipedia) do.

eweise 9y ago

The no contrast movement has hit restaurant menus. Between the lighting and the menu, there is just no hope in reading them if I forget reading glasses.

mrob 9y ago

Despite claiming to promote high contrast text, this website is medium contrast at best. Their "black" text is #191919, not #000000 as it should be. Printer toner and carbon black based inks are frequently darker than #000000 on a typical screen, and nobody complains about them being too dark. In the case of white being darker than #ffffff, you can at least argue that most users have their monitors configured too bright (it's too bright by default because that looks better for a short term comparison, and most people don't change the defaults), so darker whites are compensating for that. There's no good reason to make black text gray.

lnanek2 9y ago
I agree and prefer black blacks. It's very common in design books to say that's an absolute no-no, however. So graphics people must think it looks better somehow.
- mrob 9y ago
  Even for body text? I've seen advice that titles should be gray, but that's to make it subjectively match black body text, because bigger text looks darker.
- mallaidh 9y ago
  Funny how that changes all of a sudden, with the whole history of printing being an effort to get as close as possible to perfectly black ink on perfectly white paper.
alanh 9y ago
So wrong. #191919 is very high contrast. Many/most sites use #333 for the text most of us perceive as "black". You can also check contrast ratios on a number of sites and you will see that #191919 & #fff make a pair that pass all guidelines at all text sizes.

singularity2001 9y ago

... then what. I tried to click "Join the Rebellion!" Nothing happened. maybe they should start the “Unclickable link revolution”

alanfranzoni 9y ago

Ironically,i find that website slightly unreadable because of very small text font.

stared 9y ago
Text fonts can be easily fixed with [Ctrl/Cmd]+[+]. There is similarly easy move for contrast.
- lgas 9y ago
  What is it, please? I've googled and found nothing (except for Chrome Plugins that offer to do the same thing, issue trackers for adding high contrast mode to ChromeOS, etc).

OliverJones 9y ago

Yes. What they are saying. Please. Also, print and physical media that's low contrast and/or tiny in size is stupid. Most internet-of-things devices, most BD players, TVs, monitors, etc, I'm looking at you, or at least trying to. Lots of hipster-era print pieces, I'm trying to look at you too. Also, let me throw in the point that blue-on-black, or yellow-on-white, contrast is hostile to the human visual system, especially in low light. The human eyes' lenses have a smaller circle of confusion (optical jargon) for longer wavelength light. Blue emergency lights on cop cars: couldn't be worse for visibility and dark adaption if they tried. Red please!

userbinator 9y ago

My long-standing theory on why this started is because the default brightness/contrast on monitors is usually far too high for the average environment --- they may look great sitting on the (often also brightly-lit) store shelf, but are eye-wateringly unbearable in the typical office or home. Thus designers started reducing contrast in a sort of software workaround to what is actually a hardware problem, and those of us who adjust our displays for more comfortable viewing get unreadably low contrast. My monitors are set to only 12% contrast/10% brightness on one and 20/30 on the (slightly older) other to compensate for wear, and it's plenty enough. It's also probably better for longevity to not be driving the backlight at full intensity.

metasean 9y ago

I find these tools to be really useful in evaluating designs and emphasizing to stakeholders where designs fall according to standards: - http://www.checkmycolours.com/ http://www.checkmycolours.com/ - https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 https://snook.ca/technical/colour_contrast/colour.html#fg=33... --- edit: adding extra lines to get proper line breaks

thinkxl 9y ago
Some more: - http://webaim.org/resources/contrastchecker/ http://webaim.org/resources/contrastchecker/ (great tool) - https://24ways.org/2012/colour-accessibility/ https://24ways.org/2012/colour-accessibility/ - https://www.viget.com/articles/color-contrast https://www.viget.com/articles/color-contrast

justin_vanw 9y ago

I found this site to hurt my eyes and left me with really bad after images. It's dusk here and I haven't turned the lights on yet, maybe that is why, but I really prefer mild contrast when reading or I end up having striped after images and floaters become very noticeable. Maybe the nice looking sites aren't so bad, and people who disagree can just override the settings (very easy in browsers), like has been possible since windows 3.1.

jansho 9y ago
I'm mostly in the high contrast camp but in low lighting situations, I have to agree with you. I hit the "Night Shift" button on my iPhone, or flux when on laptop. https://justgetflux.com/ https://justgetflux.com/
bo1024 9y ago
As someone else posted, maybe your hardware's brightness is too high?

kbutler 9y ago

It's a pretty common design meme to "not use pure black" (e.g., https://ianstormtaylor.com/design-tip-never-use-black/ https://ianstormtaylor.com/design-tip-never-use-black/) or "not use pure white". What these designers appear not to realize, is that you are going to be viewing these designs on a light-emitting device, or at least a light-reflecting surface. None of these can actually produce a "pure black" (which would be no light at all) or "pure white". Even NASA only gets close: https://www.nasa.gov/topics/technology/features/super-black-material.html https://www.nasa.gov/topics/technology/features/super-black-... So designers can say that #000 is too dark, or that #fff is too light, but calling them pure black or pure white, is just inaccurate.

deleted 9y ago
[deleted]

ensiferum 9y ago

and what good is that page when the font size is unreadably small?

angersock 9y ago

If you don't like low-contrast, perhaps check out jwz.org or angersock.com

chris_st 9y ago

Man, I wish presenters at conferences would learn this. Really, just that they'd learn that the contrast range on their laptop is huge compared to the contrast range on the projector that everyone else is looking at, especially when you're far from the screen. Surprisingly (to me) I saw really-light-blue-text-on-white as well as the hipster-dark-colors-on-black at the last conference I was at. Neither was legible...

CalChris 9y ago

Solarized [1] is a contrast offender. There are things that I like about Solarized especially having a consistent palette across applications. But reducing contrast, especially for comments, leads to eyestrain. His 'content tones' are all reduced contrast with respect to background, between 45-65 L*. And his background black isn't 0 and I'm not sure why. [1] http://ethanschoonover.com/solarized http://ethanschoonover.com/solarized

loxias 9y ago

This is not a "rebellion". This is common sense. :)

z3t4 9y ago

you should design to make the content digestive. but if the content is bad you can make it look good and it will still sell.

woodandsteel 9y ago

This is one reason I love Firefox's Reader View button.

dzhiurgis 9y ago

Somewhat ironically this page has awful scrolling performance...