The Contrast Rebellion | Hacker News Reader

The Contrast Rebellion

contrastrebellion.com

86 pointsjansho46 comments

Open articleView on HN

> 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...

I enjoy a nicely styled, pleasant site, but I only read about 80% of them as-is.

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

The same page when I'm done with it: 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.

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.htm...

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.

The equivalent in Chrome is to install the Web Developer plugin and click CSS->Disable All Styles.

I'm curious how well this works. A big part of design (aside from visual pleasantness) is information hierarchy, in which layout (order/spacing/size/etc) of various pieces of content is manipulated (via css) for emphasis (or deemphasis).

When you turn off all the styles, you're still getting an information hierarchy (top to bottom) - but it's now being determined by the order of html elements on the page, not the layout the designer used css to achieve. These hierarchies were probably the same on the early-web, but not so much these days.

Before my reply, a request to designers: please arrange your elements so that they make sense when viewed without styles, for curmudgeons like me, and for people who use text browsers and visual assist tools. Important content first, and sidebars and ads last, would be great.

Reply: It works better than leaving the site as-is, in an unreadable or annoying state.

This happens most often, believe it or not, with news outlets (sorry, can't think of one). What you get is an incredibly long page, with the content usually somewhere in the middle, preceded and followed by multiple instances of links to the same other stories. It's not that hard to just grab the mouse and zoom the scroll bar down to what looks most obviously like what you're looking for: a bunch of unmolested text paragraphs.

With "private" sites like personal blogs and whatnot, the result of hitting the no styles button is the same, but usually the useless before and after matter is not as long.

I really don't have a problem doing that, and once I get to unmolested content I almost always enjoy it or find it useful. It's better than bailing, most of the time, and there doesn't seem to be any correlation between "this site sucks for me visually" and the quality of the actual content. So it's usually worth giving it a try.

EDIT: >A big part of design (aside from visual pleasantness) is information hierarchy, ...

This is virtually never important to me, because I virtually never get to anyone's page from their front page. I got to your page through someone else's aggregation. HN obviously. The NYT front page (hold on, hold on :) is just an aggregator of links to their stories, and the front page looks nothing like the story pages. Google news is an aggregator to pages within other outlets' aggregations.

I virtually always ignore virtually everything on a page that's not the content I came to read, and nothing on any of the site's other pages helped me get there, because I was never there. Someone else must have been there for the HN link to exist, and maybe (or maybe not) the ephemera helped them make a link for me. But it wasn't me.

Why do I not visit Art of Manliness, or some software blog, regularly? Because they rarely post anything I care about, certainly not often enough for me to gamble my time that maybe, this time, I'll find something worth reading. Investors use OPM, Other Peoples' Money, to make money. I use OPT, Other Peoples' Time, to find content worth reading on the web, and I'm as unapologetic as investors for that.

Mmmm, coffee ...

Dude, he was talking about page content hierarchy, not the whole website hierarchy... You could've saved a couple paragraphs of ranting right there. SMH

Yes, he was talking about page content hierarchy. There are two kinds of content on a page: what I came there to read (like this comment), and everything else. Everything else is dedicated to helping me find my way to somewhere else. My point was that I don't read everything else, and so it doesn't help me (I know, it's a me-specific rant, but maybe I'm not the only one) no matter what page it's on; maybe it's not as important as what a particular page is about, and so the most important elements should be at the top (of all the pages).

> SMH

Sydney Morning Herald? G'day mate!

It's a pretty common design meme to "not use pure black" (e.g., 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-...

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.

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...

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.

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?

The Ask HN thing is so bizarre. For the longest time I thought everyone just hated Ask HNs and so immediately downvoted them.

> The Ask HN thing is so bizarre

Agreed. Second bit though, you just jump on the bandwagon?

You misread it.

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.

I think the semantics are good too, but it is still problematic. And note that selecting doesn’t really enhance contrast on Macs.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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!

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/

- https://snook.ca/technical/colour_contrast/colour.html#fg=33...

---

edit: adding extra lines to get proper line breaks

Some more:

- http://webaim.org/resources/contrastchecker/ (great tool)

- https://24ways.org/2012/colour-accessibility/

- https://www.viget.com/articles/color-contrast

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.

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/

As someone else posted, maybe your hardware's brightness is too high?

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

Text fonts can be easily fixed with [Ctrl/Cmd]+[+]. There is similarly easy move for contrast.

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).

... then what.

I tried to click "Join the Rebellion!"

Nothing happened.

maybe they should start the “Unclickable link revolution”

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

Somewhat ironically this page has awful scrolling performance...

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

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.

This is not a "rebellion".

This is common sense. :)

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

Reply on news.ycombinator.com