Hacker News new | past | comments | ask | show | jobs | submit login
Contrast Rebellion (contrastrebellion.com)
99 points by kartikkumar on April 26, 2015 | hide | past | favorite | 70 comments



Yeah, and this website does grotty hacks to figure out my browser tab size and scale--which makes me scroll and scroll and scroll and scroll on a 4K monitor.

He's an brilliant idea: quit trying to turn the web from scrolling text into a damn slideshow. Thanks.


Auxiliary support provided by The Horde of Users Who Want Drop Shadow & Gradient Easements In Their UI So They Can Tell What They Can Click On, or THUWWDSGEITUISTCTWTCC, pronounced Thuh-Woods-Gheit-Eww-Tict-Wit-See.


The critique of HN seems off-base. The low-contrast comments are the ones that are downvoted and therefore the low-contrast is there specifically to make them less readable because they ostensibly deserve less attention.


That isn't a downvoted comment in the screen shot, that's the topic text as in https://news.ycombinator.com/item?id=9441500


It also applies to the text of self-posts (tell/ask HN), which is what Contrast Rebellion points out.


I think that is also intentional, to discourage self posts.


I swap the margin and main-body colors of HN:

http://stylebot.me/styles/2945


> because they ostensibly deserve less attention.

They end up standing out to me, and I always end up reading them.


I got a radical idea: do not touch the body text/background colors and let user agent/browser pick the colors according to users preferences.


This is the case now: browsers are scriptable and every major browser has the ability to install extensions to adjust nearly every single feature of a page's text rendering with just a few clicks.

Turns out most people just don't care about typography.


There are just two little config changes that obviously no-one would ever care about that make a lot of newer websites unusable: Setting a minimum font size and/or forcing your own default can cause text to pile up, grow to insane sizes, screw up column width that content becomes a tiny ribbon, or cause text to render entirely offscreen. One of the main causes is the same kind of control freak design that insists on low-contrast text - designers who want some kind of pixel-perfect "responsive Photoshop" that ensures no user anywhere can deviate from their choses appearance. The other is forced fonts including icon fonts - designers are not better at figuring out what fonts a user finds most readable (especially those with poor vision) and icon fonts require turning off the users fonts and often enabling javascript.


"to install extensions". This is satire, right?


The new reader modes that browsers are adding let you kinda do this.


Hah, good one. This is the Internet we deserve, not the one we need.


Many of the examples looked borderline to me. How much contrast is 'enough'?

Also - surely this is something that should be fixable in the OS or browser? OSX has an high-contrast accessibility mode. Do we really need to fix this at source?


http://www.w3.org/WAI/PF/aria-practices/

Section 12 talks about how to detect the high contrast mode used by the OS.

One problem is that low-contrast does not just affect those with a visual impairment. It affects people with a different OS (the gamma on mac and windows is different), on differnet monitors, in different lighting, and with different but not impaired eyes. Most people won't be using high contrast mode because it sucks, and because bad web designers refuse to use high contrast fonts - why are they going to bother detecting high contrast mode?


Good rule for contrast: If you would refer to the text color and background color by the same word, that's not enough contrast. Compare the good contrast examples, largely black on white or white on black, with the bad examples, universally gray on gray (or off-white on off-white).


So, the fewer words you know to refer to colors, the more contrast matters to you? :)


You might be right! I am colorblind, and for example I can't see the red component of violet, so most "violet" is just "blue" to me. Purple, too: I have trouble distinguishing the blue in purple, so a lot of purple simply looks "red". If it were up to me, there wouldn't be a word for violet, because it doesn't exist.


Absolutely correct.

It's called the Sapir-Whorf hypothesis. You can refer to the Himba color experiment for more information : http://www.vidipedia.org/vidipedia-the-video-encyclopedia/vi...


This rings a bell inside my head; given people from a language/culture with two different words for what English speakers would identify as barely different shades of the same colour, they are objectively better at identifying those two shades than the native English speaker. Which essentially gives the answer "yes" to your question.

Here's a reference that might be what's ringing inside my head: http://www.newscientist.com/article/dn11759-russian-speakers...

Particularly relevant quote: "This is the first time that evidence has been offered to show cross-linguistic differences in colour perception in an objective task"

Here's more: https://eagereyes.org/blog/2011/you-only-see-colors-you-can-...


This "Russian experiment" is a bit weird, as though it's true that "синий" usually refers to darker colors and "голубой" to the lighter ones, both colors to chose from could be referred to as "синий" or "голубой" interchangeably. Actually, it's not that clear what is "синий" and "голубой" anyway: sky is like The "синий", but quite often referred to as "голубой" instead, but somebody's eyes almost never are referred to as "синий": maybe only if you want to emphasize how unusually bright they are. But if your dress would be the same color as the eyes, it could be called "синий" easily.

What I'm trying to say, there's no that big difference between these two words in Russian to explain the experiment results, unlike what was shown to us on that video about some African tribe. More like "purple" and "violet" — there clearly is a difference, but many people would fail even to point which one is which, and some might even argue about that.



You joke, but I bet it correlates pretty well.


> Many of the examples looked borderline to me.

Check out the fourth panel of the article. It doesn't take much to turn 'borderline' into 'awful'.


> do we really need to fix this at source?

Yes. Otherwise you are chosing to exclude people.


Any choice you make will exclude some people. The colorblind won't be able to read it if you use some color combinations. Using such high-contrast fonts hurts my eyes and thus excludes me from enjoying it as much.

It's likely people arenot "chosing to exclude", but rather happens to as a byproduct. It's far more likely someone chose low-contrast because they wished to help visitors eyes or for aesthetic purposes, not because they woke up that morning and said "Gosh I hate the sight-impaired".

Being able to read a webpage is not a universal right. It is not the onus of the webpage to make itself readable. You don't demand that japanese webpages offer klingon translations when they only wish to reach a japanese audience simply because they're excluding those poor soles who prefer to read klingon, do you?

It's perfectly reasonable to expect a user of the webpage to make it usable for themselves, whether that be by running it through google translate or turning on their OS's high contrast mode or whatever.

The fact that the choice excludes people should not be bandied as if it's a real argument.


> It's perfectly reasonable to expect a user of the webpage to make it usable for themselves, whether that be by running it through google translate or turning on their OS's high contrast mode or whatever.

No, it isn't. By deliberately choosing terrible contrast a designer is choosing to exclude people with visual impairment. That's why accessible websites is written into law and contrast is written into best practice guidance for making a website accessible.

> Being able to read a webpage is not a universal right. It is not the onus of the webpage to make itself readable.

There's quite a few situations where accessible websites are a human right. (Eg government websites would be covered by article 21).

When you say "of course you can't read this website; you have a visual impairment" you are passing the blame. But the job of a website team - the thing they are paid for - is to provide information that's accessible to the target audience. It's not my job to read that information. I'm probably not getting paid to read the website.

And bad contrast choices aren't just hard to read for people with visual impairment. They're hard to read for someone on a different monitor or in different lighting.

> You don't demand that japanese webpages offer klingon translations when they only wish to reach a japanese audience simply because they're excluding those poor soles who prefer to read klingon, do you?

You started by saying this was not about choosing to exclude people but here you clearly show that someone has made the choice to exclude a group. The difference being that it is fine to exclude speakers of a made up language; it's not acceptable to exclude disabled people.


Websites aren't published in braille either. As long ad the site content is compatible with standard assistive tech in the client software, it is fine.


This is hardly the same comparisone since it's not possible to publish them in braille on a monitor. And publishing a picture of the braille letters wouldn't even help since the blind person still couldn't read them.

Braille users are able to read text using a http://en.wikipedia.org/wiki/Refreshable_braille_display but that's not the same thing as a monitor.

Using grey text on grey backgrounds is much more similar to publishing all your text in images which makes is inaccessible to the blind person unless they install OCR software. But hey that's cool it's on them anyway right?


Using such high-contrast fonts hurts my eyes and thus excludes me from enjoying it as much.

Your eyes and monitor may benefit from lowering the contrast/brightness. Most monitors seem to come set by default to maximum or near-maximum eye-watering brightness and contrast, which is great for in-store displays in an environment containing lots of other high-brightness lighting, but horrible for actual use. Turn it down so that black on white is comfortable to view.

It's far more likely someone chose low-contrast because they wished to help visitors eyes or for aesthetic purposes

It makes me wonder if those who use low-contrast designs are the same ones who have their monitors at such extreme settings that they have to compensate by reducing it on their pages, thus making it unreadable to those with their monitors set to comfortably reproduce black on white.


Being able to read a webpage is not a universal right.

So you oppose consciousness-raising of an issue, to make people aware of it? You oppose "Hey designers, here are some issues to think of"?

It's perfectly reasonable to expect a user of the webpage to make it usable for themselves

The solutions you offer are sledgehammers. Better to just be a good designer who is inclusive, than demand users monochrome their entire operating system just to read your site. I mean, that's even worse than "This page is best viewed in Browser X".


Discussion from last time around:

https://news.ycombinator.com/item?id=2807047


It has been 4 years. Has the rebellion made gains?


I think not. I go into details here: http://unreadable.website/guide.html ...

The biggest problem is the screen on say a MBP is different than an X240 or an XPS13. Next time you are in a big box retailer look at them side-by-side - each screen can access a quite dramatically different contrast and color space.

So the low-contrast issue is a manifestation of the classic "works for me" bug. A "cozy" distance on one display become irritatingly illegible on another.

The WCAG2 (http://www.w3.org/TR/WCAG20/) calls for a 4.5:1 ratio ... make this 7:1 or so and you are good.


Despite praising high contrast, this site hypocritically throws away contrast for no good reason. I can understand using non-white backgrounds, because it can reduce glare, but using grey text is pure fashion. This site uses color:#191919 text. As always, the only good solution is user CSS to set it to #000000. I use the Stylish addon for Firefox to let me toggle this quickly for sites with light or dark color schemes.


Too much contrast is also bad, reducing blacks just a tiny bit reduces eye strain in the average screen.


There's no chance of too much contrast on an LCD displaying dark text on a light background. People have no trouble reading high quality print in sunlight, and that has much higher contrast. Grey text is harder to read, as demonstrated by the studies cited. Eg. this one finds pure 100% black on 100% white is most legible: http://www.laurenscharff.com/research/agecontrast.html

Black text is the default, and changing it to grey only makes things worse. This is superior web design to the vast majority of sites out there: http://motherfuckingwebsite.com/

But note that excessive contrast can harm legibility of light text on dark background (although that color scheme is less legible, so it should be reserved for cases where it has real benefits, eg. photo editing software, where it makes it easier to see shadow detail).


The medium-high contrast setting they compared with would be equivalent of #444444, much brighter than the #191919 used by the website. I find it impossible to read a book in direct sunlight, and am pretty sure it's not just me.


The problem I notice is that anything other than _very_ slightly greyed font appears blurry to me. #330 is as far as I'll take it.

Rather than lighten the text, darken the background lightly. #fffff8 is a good start.


using non-white backgrounds, because it can reduce glare

The real problem with glare is excessively shiny, glossy screens.


Yea, but they also help with better color rendition, finer details and deeper blacks.The "anti-glare" technology used on non glossy screens is basically reducing their optical capabilities...


People should filter colors and fonts the same way they filter ads. Its easy.


A tiny number of people filter ads.

Why should bad designers get to force a bunch of people to fix mistaken web design choices?


>A tiny number of people filter ads.

"41% of 18-29 year olds polled said they use adblock ... In some countries nearly one quarter of the online population has it installed"

-- http://blog.pagefair.com/2014/adblocking-report/


> There are about 144 million active adblock users around the world.

That is a small number of people of the total Internet population.

It's a bit surprising that you think an advertiser pushing ads is a suitable source for information about ad-blocking. Obviously they're going to say that ad-blocking is prevalant and that you need to run better ads to stop people running ad-blockers and oh, we just happen to be an ad company that runs that particular type of ad.


It was the best source at hand, if you have another study i'd be interested to hear it.

There's apparently 2.9bn internet users, so you're right that ~5% isn't a very big number in context.


Why should people suffer because of bad designers?


Yes. That's what I said.


It's ironic that this site is kind of hard to read in Mobile Safari.


The following is a brain dump of an idea I have:

I've thought of writing a proxy server that parses pages before serving them to you. It's goal would be to make webpages more readable, with sane font sizes and colors. I'm tired of reading webpages on my iPhone that are "optimized" for mobile where each line is 5 words. I could fit more text on the screen of my first laptop, which had half the resolution. Also, blog posts from medium.com currently crash mobile Safari.

Every website would require custom code. It's default failure mode would be to just show the original web page. I don't want to have to fuck with it when some page gets mangled and is completely unreadable.


Not a bad idea - but not there are services that do this by scraping the web page (Instapaper, Readability, etc), rather than requiring a proxy.

I encourage you to check them out - maybe you can do even better.


How is that different from the already existing "Reader" mode in mobile Safari?

Or Instapaper et al.


I am confident this rebellion will be one of the few that will succeed in these days.

Why ? Because rebellions like revolutions need a critic mass of people and well, we are getting very old here ;-)


I have something in the same spirit: http://unreadable.website


They may have gotten the contrast thing right but they totally messed up on the fonts. I rarely comment on style because I think the substance is what we should focus on but for a site that goes out of its way to criticize one particular design parameter I don't get how they could mess up so badly on another. That's just ugly.


Aesthetics and legibility are two different things. Lumping them both together under "design parameters" misses the point.


Not sure about the aesthetics argument. Form follows function - if it functions well it looks good, and vice versa. (What people sometimes miss is that you aren't born with a sense of aesthetics/taste but it needs to be learned and the above rule is a good way of improving your understanding of what looks good.)


Services like https://readability.com/ certainly help. To the extreme, let's have the equivalent of Photoshop's 'curves' filter - map everything to either absolute black or absolute white.


dark background, Light Background!, dark background, Light Background!

Scrolling trough this page made my eyes hurt, did nobody test the transitions when they set really dark and light backgrounds right after each other?


A rebellion. Yeah, it's a regular bunch of Pancho Villas over there. Boy oh boy.


Web design was perfected in 1454 when Gutenberg typeset his Bibles with dark black text on light colored paper (also: with narrow, full-justified columns). Deviation from that is abusive to your readers and an affront to common decency.


Certainly publishers could have adopted the "gray on gray" fad at any intervening time, and saved money doing so (diluting the ink, no optical brighteners or bleaching on the paper), but they didn't.

Only in the era of the web has deliberate illegibility somehow become trendy.


Well, what I'm to say here… If you are site owner and you feel that colors hurt conversion/number of visitors/time spent on page/whatever else you care about — you probably should change the colors. If you are a visitor and you feel that colors of the site you'd like to use discourage you to do so — you probably need to help yourself and make a custom CSS of your own (using Stylish or something) to satisfy your very unique needs or just use one of many services like http://readable.tastefulwords.com/ .

Anything else: rebel all you want, nobody fucking cares.

My personal humble opinion, btw: the "unreadable" examples are much more readable and easier on the eyes, than eye-burning "readable" ones. So I could as well go around rebelling about white on black or black on white, but I won't, because it's stupid, I follow my own advices and use Pocketbook for long reads anyway.


> If you are a visitor and you feel that colors of the site you'd like to use discourage you to do so — you probably need to help yourself and make a custom CSS of your own

This attitude is hostile to a wide range of people who already have to fight the computer to get things done and shouldn't have to fight the stupid decisions made by bad designers.

> nobody fucking cares.

For various values of "nobody" including "some people", where some people means any group subject to various disability discrimination laws in whatever countries they operate in.


Hostile? I would call it "fair". Because, ok, let's assume you win. I'm wrong, you're right, and some ultimate dictator decides that all websites now are coming in black-on-white only. What should I do, as a person that feels low-contrast is much nicer than eye-burning one? Exactly, I'm about to make my own customizations or suffer. And then you should be saying, that black-on-white is hostile to me, which wouldn't make much sense, as you (or somebody else for that matter) would have something to complain on either way.

Hence my first point about "if it hurts conversion/…". In other words, if it's your business — it's your business. If it's not — well, you are free to complain about other people coloring their stuff as they like all you want, but I hope they won't be upset about that, because they really shouldn't be, and believing that your point of view is the only right one (even if it's supported by some Nielsen or whatever) is simply ignorance.


I agree that too high contrast is also wrong. Notice how the submitted website does not use black text on a white background anywhere? No one is asking for maximum contrast. People are asking for good contrast, and that includes "not black on white".


Do you have visual trouble reading books also?

Your monitor brightness maybe set too high For example, mobile devices' minimum brightness is far too bright in a dark room.


Asking visitors to make adjustments to their taste is far easier and less hostile than asking a webdev to create a webpage which uses colors that every person who visits it will like. In fact, it's not just hostile to the webdev, but impossible.


But I'm not asking designers to guess what visitors will like. I'm asking designers to avoid a narrow range of colours that we know people hate.

There is no reason to use light grey text on a mid grey background for text that you want people to read.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: