
How the Web Became Unreadable - mirandak4
https://backchannel.com/how-the-web-became-unreadable-a781ddc711b6#.r3lqzaeqq
======
jonstokes
Designers are ruining software in general. iTunes, the iOS music app, and
Google Maps are just a few pieces of software that started out relatively
usable (if not exactly stable in the case of iTunes), and have been iterated
and stylized to the point where I routinely get enraged by them.

At least Google Maps has walked back that terrible accordion thing that
literally drove me crazy.

I basically think design is like a cancer on the web anymore. You know what
works? Craiglist, that's what works. Reddit works. Hacker News works. The old,
pre-design-goober Google Apps interface worked.

I seriously want to punch a hipster every time I have to use an app that used
to work and has now been designed to death.

~~~
js8
> Designers are ruining software in general.

I agree with you. But what I find hilarious about it is that in the 90s, there
was a meme that software engineers cannot do usability very well, and you need
specialized designers.

I think it all comes down to humility. Think about and respect the user. Do
usability studies and follow their results, like Microsoft used to do in 90s.
Don't let your notions of aesthetics overrule the needs or wishes of the
users, and especially wish for things not to change.

~~~
eitland
Not saying this is always the case but I wonder if, in some of the cases, this
is what makes it hard for designers to get accepted in open source:

the fact that many of the developers are also users and as such are pretty
opinionated while the designers that come to open source might often be very
eager to "set their mark" on something?

~~~
matt4077
I doubt there are many designers working on OSS who don't also use it.

I' even doubt the premise that there are terrible open source UIs created by
designers. The vast majority of OSS GUI apps were probably styled by
programmers, and I think they proved quite well over last 20 years that they
chose well when not becoming designers.

The problem with design is also that it doesn't work very well in the "bazaar"
style of development. Consistency is possibly the single most important
feature of good design, and it gets hard to achieve without central
authorities.

~~~
EdiX
GNOME employs professional designers and produces consistently the worst
designs in open source: kill features left and right in the name of
"simplicity" then add excessive padding to what's left all in service of
achieving that "ugly but useless" state that everyone loves.

~~~
js8
Gnome 2 and KDE 3 were IMHO the best - well designed for usability,
traditional, consistent, with good guidelines. I think those prove that it can
be in OSS.

However, I don't think users care that much about consistency, unfortunately
(even though I think it's important aspect of design). Look at web, every
website is different and it's considered a good thing by designers. There is
no consistency on web and yet desktop apps struggle to compete.

------
ThomPete
It’s true that many designers tend to look at text more like a texture.
Instead of making it large and distinct they will make it small and light
colored when it's in fact the only valuable thing on the screen.

It's an unfortunate consequence of so much design today going minimal and more
typographic, which makes it's hard to differentiate elements any other way
than to start evening out the contrast. If everything that is text was just
black you would loose the hierarchy.

There er of course plenty of ways to get around it and most experienced
designers know how to deal with it. I don't think it's going to be a lasting
problem though.

Also important to notice that retina screens make a big difference between
what is readable and not. You can get away with much more finesse when you
design for retina screens. And I think a lot of designers unfortunately use
only that when they design.

If you look at print typography you will find a lot of small text sizes
because print is crisp enough to be readable. So technology will take care of
most of it IMO.

~~~
onli
> Instead of making it large and distinct they will make it small and light
> colored when it's in fact the only valuable thing on the screen.

But modern web design is the contrary. Large big webfonts, distinct ones for
headlines and text as beautiful as possible. Yes, sometimes the text is then
made grey and oftentimes this is just bad design, but I don't think the
texture comaprision is accurate.

Here for example, in the appengine dashboard screenshots, the grey text in the
menu is used to create hierarchy. I would also argue that the greying of the
text has another function here: By making most of the menu labels less
visible, you can focus the attention to the parts of the page that are the
most prominent. Not sure hat worked very well sincethat does nto seem to be
used here, but it sure has another effect than the prior design where
almostevery element was screaming for attention.

~~~
flukus
> Large big webfonts

This can be aggravating too, just because I'm on a desktop doesn't mean I have
19" monitors and the browser maximized.

~~~
onli
19" monitors are like the smallest you can still buy, and have been for some
years. But sure, Browsers are not always maximized, and there are small
laptops and tablets and smartphones… but modern webdesign has with responsive
design really a good answer here that takes that into account, and that also
considers the font size. So yes, that can be aggravating, but not in modern
webdesign per se, only in bad design in general.

------
Bartweiss
Subjective though it may be, there are a lot of people who find black-on-white
unpleasant to look at. I greatly prefer sites that _don 't_ use it, regardless
of what they do with font and size.

This could just be a case of conflicting preferences, but I don't think it has
to be. Clear contrasts are achievable without insisting on #000/#FFF web
design.

\- The most obvious improvement is simply keeping an eye on contrast. The
article mentions using #333 over #000, but none of the unreadable samples
provided are anywhere near that dark. #333 is approximately "light black" to
the eye, and I suspect would give little trouble on a white background.

\- Another trick is to vary _one_ of background and text. Both Google and
Apple violate this guideline by placing dark grey text on a light grey
background. Again subjective, but offering a visual 'endpoint' seems to
preserve clarity in a way that multiple shades of grey do not (perhaps it just
encourages more careful design).

\- Finally, we can choose colors which are not strictly grey. The HN
background is a rather usable 244/244/235 - not far outside of light grey, but
tan enough to provide more contrast than the pure brightness would imply. The
vote/name options here are emphatically grey-on-grey, but it is at least a
design choice to minimize their distractingness.

~~~
dredmorbius
Shifting the _background_ colour, _slightly_ , tends to be vastly more
readable than screwing with the foreground colour:

[https://codepen.io/dredmorbius/full/KpMqqB/](https://codepen.io/dredmorbius/full/KpMqqB/)

It also far more closely approaches the appearance of print on somewhat aged
paper:

[https://archive.org/stream/commercialismjou00holtuoft#page/5...](https://archive.org/stream/commercialismjou00holtuoft#page/54/mode/2up)

~~~
kps
It's not aged paper, necessarily; look at any well-made book (excluding glossy
picture books) and the paper will be stable and opaque but not bright.

~~~
dredmorbius
I'm spending a lot of time going through Internet Archive books (the one
indicated has relevance to the whole advertising-supported nature of the
Internet as well, I submitted it as an HN article earlier today). So I'm
somewhat attuned to the visual appearance.

Different paper ages differently, and I believe that much of the highly-
yellowed paper is high-pulp content, as opposed to archival-quality, acid-free
rag. The degree of yellowing can vary, and in some cases it's rather more than
I'd prefer for comfortable reading. In modest amounts, it's not bad though.

~~~
kps
Yes, my intent was to emphasize that lower-than-maximum contrast through paper
(and not grey ink) is typical of most high-quality printing, to avoid giving
the impression that it implies age, wear, or low quality (pulp/newsprint),
which designers probably want to avoid.

(There was an 18th-century fad for extremely high contrast, but fortunately it
passed. And current printer/copy paper is excessively bright (often even using
fluorescent brighteners), but no one considers photocopies to be the height of
good taste.)

------
hurbledr
I think that a lot of it comes down to designers needing/wanting to justify
their job.

If a designer or typographer does good work, it goes largely unnoticed, since
navigating the page and reading the text is easy and fluid. This can lead
clients to believe that the designer is not doing much at all, when in fact
they are doing their job exceptionally well.

This leads to designers adding unnecessary ornamentation (often at the clients
behest), just to make it seem as though they are providing more of a service.

As others have pointed out, no one is sitting in meetings reading the boiler
plate text on designs, they are just looking at the overall page to see if it
'pops' or whatever. So really, it's as much the clients fault as the
designers, although a good designer should be able to communicate why the
flashiest, most cutting edge choices are not always the best.

Also, I'd like to recommend this book, The New Typography. It's an old book,
but they do a really great job of explaining the goals of typography, and how
one can be creative without sacrificing readability, etc.
[https://www.amazon.com/New-Typography-Weimar-Now-
Criticism/d...](https://www.amazon.com/New-Typography-Weimar-Now-
Criticism/dp/0520071476/ref=sr_1_1?s=books&ie=UTF8&qid=1476901379&sr=1-1&keywords=the+new+typography)

------
tragomaskhalos
I think it's a broader problem - too much css fluff, _far_ too much
javascript; even the simplest webpages now seem to feel the need to be
miniature apps in their own right, instead of just serving the damned content
already. I often websurf using an old 1st gen iPad and it's a massively
frustrating experience just how many sites nowadays just crash the damned
browser.

~~~
rafaquintanilha
How does that apply to typography?

~~~
forgottenpass
The typography problem the article discusses is just a subset of a generic
problem where design decisions are made without any care for people who do not
share the designer's exact use case.

------
taprun
I'll just add this link[0], because I'm sure someone is going to mention it.

[0] [http://contrastrebellion.com/](http://contrastrebellion.com/)

~~~
sotojuan
Heh, I love how so many tech and design things are "manifestos" or
"rebellions".

~~~
zeveb
Good point. In this case it shouldn't be about rebelling against an
established order, but rather about establishing order (i.e., nice, clean,
high-contrast standards) out of an unreadable chaos (i.e. the low-contrast
free-for-all).

------
Animats
Greg Lutz of GM once commented that GM's designers had fallen in love with
Bang and Olufsen design from the 1980s.[1] Bang and Olufsen was (and still is)
big on black-on-black design, with controls so subtle that they're barely
visible. This makes for great photos, but not usable cars. He, as head of GM,
had to restrain them from making inscrutable dashboards. This mindset seems to
have reached the Web.

For an alternative design paradigm, see Olivetti industrial design of the
1960s and 1970s.[2] Bright colors, strong contrast, and materials nice to
touch. Any good museum of modern art will have some Olivetti devices of that
period. Those are worth a look. They had contrast without clutter.

[1]
[https://www.google.com/search?q=Bang+and+Olufsen&tbm=isch](https://www.google.com/search?q=Bang+and+Olufsen&tbm=isch)
[2]
[https://www.google.com/search?q=olivetti+industrial+design&t...](https://www.google.com/search?q=olivetti+industrial+design&tbm=isch)

~~~
boundlessdreamz
Never heard of Olivetti before. You are right, they look great without
overbearing or cluttered.

------
unicornporn
I'm so surprised that all attempts at solutions for "readability" so far seems
to have addressed the actual article or post content only. I don't just want
to read a sane looking web, I want to browse a accessible and sane looking
web.

I'd like to be able to activate a browser mode that cleans up not only the
content of the site, but also the structure by creating simple and accessible
navigation (perhaps according to html and css rules that I can write myself).

Many sites have a similar type of structure (/about/, /contact/ etc). HTML5
sites with <nav> will hopefully have made this endeavor much easier.

Sites with more complicated structure could perhaps be analyzed by AI and OK'd
and corrected by a collective of users (via a browser extension). When the
sites has been "solved" by AI and/or it's users, it can be added to a shared
database (think something like
[https://userstyles.org/](https://userstyles.org/)) that will be automatically
queried when you use the site.

~~~
digi_owl
Reminds me that Opera's Mini browser (a proxy browser that originated on J2ME
enabled featurephones) have a single column option. This will attempt to
rearrange a page so that everything is a single column that fits the width of
the device screen.

~~~
unicornporn
I have a vague memory of this from my late feature phone days. I remember I
actually enjoyed using it considering how limited the possibilities were on
these phones.

------
Theodores
Part of the problem is that a lot of companies use web developer agencies that
deliver 'PDF' static pages of 'design' that is full of lorem-ipsum text in
light grey.

This 'design' process is not about how it works, it is purely about how it
looks. To designers that means not having to worry about what happens when
links are clicked and not having to worry about people who look at the design
on anything other than a high end Mac (with its non-standard gamma). Certainly
do not take interest in the product, hence the rigid adherence to 'lorem
ipsum'. In this world text is just shapes on a page, not something that needs
to be right.

A design process should be about getting it to work with a focus on content,
then, after that, the kids that only know Photoshop (and not a bit of HTML or
SVG or CSS) can be called on to provide a little bit of their artwork.
Tragically though the process is far too often wrong, with these static PDF
images casting in stone what the website will look like, even if the content
is illegible.

Far too many people in design are 'poseurs' rather than true creatives.
Consequently they can lack true confidence and merely imitate, hence, if Apple
are doing spider-grey text in nano-font sizes on a grey background then that
just gets appropriated.

There is no user testing in this far too common dev process, it is just
whether the guy paying the bills likes the PDF files, then some developers
have to deliver this vision without questioning it.

------
danso
I agree that the contrast on App Engine could be bumped up. But in their
defense, most of the text/labels on that page are not meant to be read as if
they are prose. As much I like Google's old-school blue aesthetic, the
underlined hyperlinks in the sidebar were, IMHO, something that had to go
away, as it's mostly obvious that every label, except for the bolded subheads,
in the sidebar is a nav-item meant to be clicked.

In terms of font-size, I think it's a difficult tradeoff to make. I'm a bit
impressed that the designers didn't try iconifying things and instead stuck
with pure text. Again, as the admin page is not meant to be read like an
article, the advantage of having small text is that at least it's possible to
fit more things onto the page, in consistent locations, rather than forcing
the user to scroll.

That's not to say that maybe some of the issue can be mitigated by
reconsidering what needs to be on the page. I find myself being mostly OK with
the typography on the App engine page because 95% of the content doesn't
require my attention, and so making everything #000, as it was in the older
version, has limited value to me.

I do prefer the older version's simple-table-list layout. I find Google Cloud
Platform to be unusable because of its multi-column boxes-everywhere layout.

------
franciscop
I have worried about this a lot, but basically now try to get inspiration and
take example from webs that I consider highly readable. I also developed a set
of internal rules; for instance, my maximum "black" is #333 (#333333) and my
minimum "white" is #eee (#EEEEEE). Anything going further than these to the
middle should have a _real_ reason and not just because _it 's prettier_.

Edit: #333 over a #eee (worst-case scenario with my guideliness) gives a
10.9:1 ratio, while #333 over #fff gives a 12.6:1 ratio, both totally
acceptable. So I am not sure how the author concludes that #333 is not good
enough and we should use #000;

Why should the people who is doing it right and pleasant change it because few
others are using ridiculous colors as in the examples? It's like saying you
shouldn't eat any sugar at all because many people is fat when you are
perfectly healthy.

~~~
epeus
Why are you throwing away so much of the gamut like this? You are ensuring
that the best possible ratio is 10.9:1 rather than 21. Now, what happens if
your user is outside and the ambient light on the screen makes what was dark
much lighter? What happens when screen dimming kicks in and reduces screen
brightness. You are likely designing on a very bright desktop monitor,
effectively staring into a lightbulb all day. Turn down your monitors
brightness instead of forcing everyone else to turn theirs up to match.

------
speeder
I am using in a still under construction pc a CRT screen.

Two things became obvious:

1\. CRT contrast is amazing, specially black levels. DOOM 4 is utterly
gorgeous.

2\. Yet CRT is now mostly unusable because questionable design decisions, I
keep stumbling in new games and websites that presume you have a 4k monitor
(seriously, I saw some games where the UI on my screen ended with letters
unreadable without a loupe...) and presume you have a specific type of lcd,
and thus rely heavily on subpixel anti alias that beside obvious looking
outright broken on crt with deformed letters, also look wrong on panels that
aren't classic lcd or have a unusual pixel organization (for example a panel
that instead of rgb in horizontal is gbr, or vertical, or a triangle, or those
cheap mobile panels with less blue pixels)

One of the things that most piss me off are windows new default font, that was
designed to only look good on lcd. And all those custom web fonts, sometimes
gigantic, so you see for example a newspaper article load with all images,
then suddenly the text disappear and only come back 2 minutes later and with
some funky unreadable font.

~~~
puddintane
CRT is also not as good for your eyes and therefore isn't as suitable as LCD
[1].

[1] [http://superuser.com/a/389678](http://superuser.com/a/389678)

Some may argue as well that you can obtain better contrast in LCD but I'm no
expert in that matter - I have just learned why CRTs are bad due to working as
a programmer.

~~~
Declanomous
I used to get eyestrain after about an hour of using a CRT. I can (and do) sit
and look at an LCD all day without eye strain. I still get eyestrain if I'm
using a monitor with PWN brightness control. That's easily fixed by turning up
the brightness to max, or choosing a well-designed LCD from the start.

------
dahjelle
Does anyone know what the contrast ratio for black ink on white paper roughly
is? I was once a big fan of black-on-white on my computer screen, until I read
that Solarized aimed for the contrast of "shaded paper" [1] and realized that
the contrast ratio on a computer screen was much greater than the contrast
ratio in printed material.

Also, it seems to me that monitors have improved in being able to display more
contrast than was previously possible. Is that true? Is that another reason
why lower-contrast designs have become more popular?

[1]
[http://ethanschoonover.com/solarized#features](http://ethanschoonover.com/solarized#features)

~~~
falcolas
You'll get more out of turning down the brightness of your monitor than
changing color schemes.

White paper will depend more on the room lighting than anything else.

~~~
dom0
For paper a contrast ratio of ~10:1 is assumed. I expect the assumption being
based on a lighting situation where one can read with no strain.

------
kuschku
There is a reason for this.

I happen to have an almost brand-new LCD screen here with LED backlight and
high resolution, and a low-resultion over-a-decade-old LCD screen.

And guess what?

A website that looks totally fine on the old one is so blindingly bright on
the new one that it hurts.

It literally hurts to look at.

This can be useful, as it provides a higher dynamic range, which can be used
to recreate the blinding brightness of an explosion when watching a movie.

But it also means that websites have to use less contrasts.

The overall problem is:

We specify sizes in the web independent of the actual monitor size, with rem
and em and pt and so on.

Why can’t we specify colors independent of the monitors actual contrast ratio,
too?

Why can’t I have a website where the text seems to have the same contrast on
and old and a new monitor, while that gif of an explosion is as blindingly
bright as possible?

~~~
epeus
If it hurts to look at your monitor set to white, turn down the brightness.
Get some room lighting so it's not the only light in the place. Stop doing
this to yourself, but don't ruin everyone else's readability because your
screen is too bright for your conditions.

~~~
kuschku
The issue is that you might want to be able to display both – a darkness so
deep that the nightsky looks bright, a brightness so bright that the sun looks
dark, and at the same time a white that always looks like a page of a book,
and a black that always looks like ink.

As said, it would be best if we had a way to specify colors in specific color
spaces.

Then I could make a website that looks consistent no matter how bright the
monitor is.

------
maxxxxx
The latest web design trends feel like they are trying to make things
"readable" for people who don't actually want to read. At the expense of
people who want to read. I am so happy when I see a simple page with text and
pictures I can scroll through without things reloading or things jumping
around.

------
mschuster91
I used to help myself with simply highlighting the text position with click-
and-drag with my mouse.

I had to stop doing this after too many sites think it's acceptable to:

1) hijack highlighting in order to display "Tweet this excerpt" or similar
stuff (some even did a "Copy this excerpt" \- as if the users were too stupid
to press Ctrl+C!)

2) replace the highlight color without taking care that it works on all site
parts, it's not really nice if text and highlight colors are the same

3) append their own custom text when pressing Ctrl+C (e.g. appending [source:
newspaper.com].

Dear (web) devs: don't f...ing mess with behaviour provided by the system.
Just don't.

------
blowski
I'd like to see some evidence that today's sites are less readable than those
that went before us. Otherwise, it just looks like nostalgia for the 'good old
days'.

Well I remember the 90s when we there were plenty of unreadable sites, ugly
monstrosities with unreadable typography and garish colour schemes. Meanwhile,
much of the web is now dominated by sites like Facebook, Google, BBC, etc -
all of which are extremely readable.

Both then and now, the reason for the bad sites is that they are made by
amateurs. They're the same people that make those terrible leaflets with 20
fonts and loads of clipart. Just because they exist, it doesn't mean the web
is getting worse. My anecdotal experience is that it's improving.

~~~
zild3d
> Meanwhile, much of the web is now dominated by sites like Facebook, Google,
> BBC, etc - all of which are extremely readable.

The author actually calls out Google and Apple specifically, for breaking
their own contrast suggestions

His example:
[https://kevinmarks.github.io/appenginebefore.png](https://kevinmarks.github.io/appenginebefore.png)
[https://kevinmarks.github.io/appengineafter.png](https://kevinmarks.github.io/appengineafter.png)

~~~
OJFord
I actually find the 'after' example an improvement for legibility - something
about the spacing I think is the improvement; I don't find the colour a
noticeable disadvantage at all.

~~~
wott
An improvement for the legibility of what? There is nothing left to be read...

------
the_duke
Ironically, site uses rgba(0,0,0,0.8) for the main text. I found it quite hard
to read.

I changed it to rgb(0,0,0), removing the opacity.

A lot easier on the eyes.

------
peteri
<rant>

My own personal pet hate on this is the m.countdown.tfl.gov.uk website. This
used to be super usable on a phone, pretty plain text, urls where I could use
the "text" number on each bus stop to jump straight to where I wanted to go by
altering the address.

The new version is awful doing requests to the web for each keystroke into a
search box (doesn't work well on a bus when signal drops out) urls for a bus
stop no longer have any relationship to the SMS text number. Loads of ads so
making it slower.

AND my biggest pain is that I can't filter by multiple buses at a bus stop.
Once upon a time I had the north bound Monument stop with a filter for the
four buses that go from there past my office (There are 13 bus routes on that
bus stop).

It does look a bit prettier but when I'm out and about I want low bandwidth
functionality.

</rant>

Note to self: Go and see how hard the tfl API is to use....

------
drblast
I wanted to make a simple, fast loading site to put essays on. I thought,
"Surely modern browsers render html 5 with these fancy new article tags on any
device in a readable format, right?"

Nope. Not at all. Shockingly bad.

"But at least there's a CSS way to limit paragraph width to a reasonable
number of words or letters that works on any device and that degrades
gracefully without resorting to Javascript, right?"

No again.

LaTeX does this exact thing and has for years. Why is this so damn hard?

~~~
lucb1e
What's wrong with body{width:600px;} and a viewport setting of, from memory,
initial scale 1 and width 600? Works for me on every device.

~~~
robert_tweed
Or even better, {max-width: 35em;}

~~~
lucb1e
Why is that better?

~~~
Nadya
If a user sets their default font size to 26px, then a max-width of 600px may
be too small... if a user sets their font size to 10px then 600px may be too
wide. A value of 35em would scale the container based on the user's selected
font size.

Containers should be relative to their content.

~~~
lucb1e
Makes sense. Thanks!

------
Ancient
So much for Microformats ([http://microformats.org](http://microformats.org))
which people were once crazed about but I never see developers concerned or
interested in. :(

Maybe it's my perspective that it's not widely implemented or talked about in
blogs, though I see WordPress has plugins for it. We (the web community)
should (should have) pushed more towards a larger usage -- it's not too late
folks.

------
DavajDavaj
Internet Archive is a very good example of how a fantastic website can be
completely ruined by "design".

The site was organized and simple to use, but everything good must come to an
end, so one day the maintainers announced the site would be completely
rebuilt, because the look had not changed in years, and we all know that old
is bad.

Time went on and the unavoidable day arrived were the new "improved" design
became mandatory instead of an option.

I still cry when I visit Internet Archive at a rare occasion. What before was
a organized site useful for research, has turned into an slow bloated
unorganized "mobile first" abomination, to further rub salt into the wound
they decided that infinite scrolling was a great idea.

------
tdeck
I'm so glad that I am not alone in this. Over the last few years I have seen
people tuning down the font-weight and putting #BBB text on an #FFF
background, and I felt like I was the only one who noticed or cared. It's nice
to know that I'm not crazy.

------
amelius
We need some strong AI to strip away the ads, and extract only the main text,
then format that text using the reader's preferences.

OCR 2.0, if you will.

Caveat: it may kill the advertisement industry.

~~~
tdb7893
killing the ad industry means killing the current web unless there is another
revenue stream

~~~
dingo_bat
It's that so? My experience says otherwise. For example, hn will stay, and so
will the linked blog. They don't show ads.

~~~
sliverstorm
HN is a meta-site. Without ads, there will be dramatically less content to
link to.

~~~
dingo_bat
I marked all the stories that I think are not dependent on ads:
[https://sli.mg/ztY27D](https://sli.mg/ztY27D)

18 out of the 30 stories on the first page do not depend on ads. That's good
enough for me, even though many interesting things are lost.

------
return0
I love those old Berners-Lee screenshots to remember how good it looked right
from the onset. We have added some footnotes since then.

------
zzzcpan
By the way, the LTE post [1] on the frontpage is also unreadable with the same
problem. Poor design is trending for some reason.

[1]
[https://news.ycombinator.com/item?id=12746110](https://news.ycombinator.com/item?id=12746110)

------
crottypeter
To make matters worse (i.e. take away even more contrast) users might be using
f.lux, twilight or similar which will move the threshold of illegibility
nearer.

(and there are valid reasons to use these, indeed I have them on phone and
desktop).

~~~
OJFord

        > users might be using f.lux, twilight or similar which
        > will move the threshold of illegibility nearer.
    

Not with the author's example at least - I just tried it with f.lux to be
sure, and the white background turns red (viewing it in the middle of the day
I can barely believe it looks natural at night!) leaving the grey pretty much
unchanged.

I'd say it's an improvement, if anything.

------
triplesec
Ironically, the article itself suffers from too-grey text on a bright
background

------
wfunction
While we're on this topic may I also point out that some CSS settings on some
sites (e.g. transform: translateZ(0)) causes Chrome to switch to grayscale
anti-aliasing [1] which also drives me and my eyes absolutely nuts. Anyone
know why no one seems to care or want to fix it? Even the article linked to
here has this problem!

[1] [http://i.imgur.com/tUjqouB.png](http://i.imgur.com/tUjqouB.png)

------
puddintane
While the article touches on some great points I think there can actually be a
balance when displaying certain types of information.

Like in reporting interfaces it's easier to highlight the data that you know
the user is going to be looking at consistently - it helps with moving through
the document as well as keeping your place. Sometimes information isn't
required but if the user were wanting to go back and verify that information
or use it to calculate something else they could do so easily (generally in my
designs whenever I make something with less contrast I will also add an action
for on focus/hover the item fades back in if the user may require that data
more but still not as much as the main bits and pieces).

Places that this doesn't work great are articles and journals, big paragraphs
of text (such as comments).

Balance, and the right use can make this technique useful in web page design
but the author is very correct in that the vast majority doesn't understand
the proper use and balance.

For we are not artists nor editor-in-chiefs so to say.

 _edit_ Should note that the reporting interfaces he is displaying do not do
this well at all.

------
acveilleux
I love Safari's reader mode exactly because it gives me a larger font black
text on a white background. I'm not even that old (mid thirties) but years of
monitors and glasses have taken their tolls on my vision. Low contrast, small
prints strain my eyes. And when encountered and reader mode isn't an option, I
usually close the site/page and go elsewhere if at all possible.

~~~
peterburkimsher
Reader mode is great! Age has nothing to do with it - I'm 27 and I also use it
regularly in Safari. It also works as a kind of ad blocker.

------
pmontra
It's easy: put a magazine close to your screen (monitor, tablet, phone,
whatever) and check what's easier to read. Do that in good light conditions to
be fair to paper which can't backlit :-) Almost everytime the magazine wins
even with smaller text. Play with the brightness control of the display.
Sometimes it gets OK but only if the white background is to bright to watch.

------
dingo_bat
"between ambient light and backlight leakage, by the time a color makes it to
a screen, not even plain black (#000) is pure; instead it has become a grayer
shade."

This is changing. The best phone displays display "pure" black. If you open a
black image on the screen, you cannot tell if the screen is on or off, even in
pitch darkness.

I love pure blacks in my apps and Web pages, contrary to the author.

~~~
yabatopia
The point is not everybody has a phone with an advanced amoled or similar
deep, pure black display. It may be changing, but the majority of the people
still has to look at a mediocre screen at best. I love amoled displays, but I
realize I'm a bit privileged.

------
StreamBright
I regurarly copy paste URLs into Pocket to be able to read the content, not
even for storing it long term. Pocket became the ultimate readability vendor
for me over the last year, for those reasons the author listed in his post and
for some other reasons (like advertising for example) too.

~~~
rabboRubble
I do sorta the same thing, but rather put things through an RSS reader. RSS
reader strips out much garbage and turns grey font to black.

Edit: Oh, and the use of Ctrl + + is a more frequent command. Bad font color
isn't as big of a problem when the font size is embiggened to 72p.

------
brlewis
This same discussion from January 2009:
[https://www.sitepoint.com/community/t/why-are-so-many-
sites-...](https://www.sitepoint.com/community/t/why-are-so-many-sites-using-
gray-text/4667)

------
danmaz74
I have two links on my bookmark bar.

"jqueryfy": javascript:(function(){var
s=document.createElement('script');s.setAttribute('src','[https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.mi...](https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'\);document.getElementsByTagName\('body'\)\[0\].appendChild\(s\);}\)\(\);)

"readability": javascript:$("*").css({color: 'white', background: '#21368c'})

I click the first one and then the second one almost every time I find
something long to read on the web (HN comments threads included). It works 95%
of the time.

~~~
cpeterso
Firefox and Safari have built-in reader mode (buttons in the address bar) that
clear away page clutter and reformat the text.

------
emodendroket
It'd be nice if we saw more work on the part of browsers to just force the
text into readable formats. iOS Reader and the Android "mobile view" are steps
in the right direction, although not specifically intended for this use case.

------
hollerith
Front-end web experts: please describe what a _user_ of the web can do to
increase legibility. (All the comment I've seen so far are addressed to web-
site _owners_ or their agents.)

In particular, how can I configure my web browser to override low-contrast
text colors? Is a userscript the best way? What is the most convenient way to
override font-lightness settings under 400?

Preferably, a single change in the configuration of my browser would result in
changes across many web site -- as opposed to my having to make a separate
change for for every web site I care about.

------
tehwalrus
The example from Apple's own documentation (asking people to use a minimum 7:1
ratio rendered at 5.5:1 on their own web site) is a wonderful gotcha! :)

Edit: and I found the bold option for my iPad. Yay!

------
z3t4
For readability you want big text and max contrast. The black text on white
background will make the eyes focus more, and might explain why some people
feel eye strain. Also the black sucks up the light in the room. You can use
colors (both text and background) to draw attention, instead of text contrast
suggested in modern guides. Remember to always design for content and
readability first!

------
nathan_long
Here's a handy tool for checking whether contrast between text and background
colors meets the Web Content Accessibility Guidelines (WCAG) 2.0:
[http://webaim.org/resources/contrastchecker/](http://webaim.org/resources/contrastchecker/)

------
Randgalt
If not for Safari's Reader feature I wouldn't be able to read a lot of pages.
This post is spot on.

------
indubitably
p { color: hsla(0, 0%, 0%, 0.8); }

------
mikeleeorg
I have grown to really love Pocket because it makes reading online articles so
much easier and more enjoyable. And bumping up font sizes on unreadable sites
is such a common habit of mine now.

------
nicwolff
Nice article, but ironically the black text is rendered with opacity=.8

------
intrasight
I like to work with designers who, like me, have worked on interfaces for
nuclear power plants, air traffic control systems, and stock trading systems.
Others, IMHO, need not apply.

~~~
psimyn
Any suggested resources for learning about these kind of interfaces?

~~~
intrasight
I don't. And a quick Googling of "usability design for mission-critical
systems" didn't come up with much. But here's some of the salient points I
have learned:

1\. Minimize different fonts and colors. Perhaps three fonts and 8 colors (and
I don't mean font families)

2\. Screen should be intelligible from 5 feet away

3\. No "chart junk" or equivalent [1]

4\. Dark grey backgrounds (very dark grey is superior to black)

You will find those characteristics to be true in the systems I mentioned.

[1]
[https://en.wikipedia.org/wiki/Chartjunk](https://en.wikipedia.org/wiki/Chartjunk)

------
timup
Good read. Will credit Apple for beginning to move away from this trend. Take
the Apple Music app in the iOS10 release...thick, chunky, bold headers, much
better contrast.

------
sebnukem2
And I thought I was the only one it bothered to no end.

------
holri
this is perfectly readable:

[http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

~~~
eriknstr
The paragraphs on that page become way too long in a full sized browser window
on a 27" display.

~~~
holri
maybe this is for you:

[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

------
msane
Contrast doesn't bother me. It's the countless popups, and repositioning the
content multiple times after loading.

------
SubiculumCode
RealClearPolitics used to have a great interface. Very usable. Very
distinctive. Then they went all modern and ruined it.

------
chmars
It's somehow ironic that Instapaper cannot parse this article – like most
(all?) Medium articles …

------
crimsonalucard
I wonder if google's decision to make the text/background ratio lighter is
data driven.

------
george101
Lots of strong opinions in this thread...

------
jimjimjim
(for firefox in windows)

press alt

select View menu

select Page Style

select No Style

Rejoice

------
draw_down
I don't really agree that the advice not to use black-on-white implies using
light-grey-on-white. It's possible for designers to interpret that advice
poorly, as the author shows.

Think of Knuth's warning against "premature optimization" and all the dumb
decisions that have been justified on the basis of a poor interpretation of
Knuth.

