
Web pages are becoming too hard to read - type0
https://opensource-usability.blogspot.com/2017/02/i-cant-read-your-website.html
======
legostormtroopr
Recently I put together a command line tool that helps this exact problem.
WCAG-Zoo helps with lots of the simple accessibility checks, and it even
prints out to the command line how it thinks the text in the page would look
once rendered (even taking into account transparencies).

Repo: [https://github.com/data61/wcag-zoo](https://github.com/data61/wcag-zoo)

Screenshots: [https://github.com/data61/wcag-
zoo/wiki/Screenshots](https://github.com/data61/wcag-zoo/wiki/Screenshots)

~~~
bloodbeard
That's awesome, I was far too lazy to implement something like that.

------
WheelsAtLarge
It's ironic this article complains about lack of readability on the web. Yet,
he uses a font that's hard to read on his blog.

It uses the Cantarell font that's very popular on the web and some people
argue is easier to read. But my experience is the opposite. It's harder to
read. To me it feels and looks like the font is not fully rendered. It's not
only harder to read but it's both psychologically and visually annoying.

To me that's a big problem, the use of fonts because they look cool and
stylish rather than readability. Cool does not always mean good.

~~~
acqq
And I find all non-serif fonts harder to read. Serif fonts are harder to read
on the low-resolution devices, but easier on paper and high-def devices,
that's why I always searched for other kind of displays, and considered the
Apple's introduction of "retina" screens as the biggest event in years in
computing, as everybody had to start "me too."

------
lcw
I never thought too much about contrast until I had to do some ADA compliance
work. Now when a designer says something looks better but it's hard for me to
personally read I can always go back to the WCAG guidelines and use it to make
a stronger argument for a higher contrast.

------
vezycash
Stupidly tiny fonts is another readability issue. The problem is compounded by
the way web browsers handle zooming. The problem affects mobile the most.

Most of my zooming efforts is to increase font size. Yet, every single element
on the page puffs-up making reading a chore. Because, I'd have to scroll the
page from left to right, back and down to read.

I hope, one browser would bake in a "zoom text only" functionality. (Yes, I
use the chrome extension, but I want it on my phone too)

------
pcurve
I agree with the article headline, but font color is only a small part of it.

What makes Web page unreadable?

> Constantly shifting color contrast of text blocks. Page starts with dark on
> light, then shifts to light on dark as you scroll down, then shifts back.
> You can literally feel your pupil dilating and undilating.

> Massive font, especially serif like the one you see on the author's page.
> [https://backchannel.com/how-the-web-became-
> unreadable-a781dd...](https://backchannel.com/how-the-web-became-
> unreadable-a781ddc711b6#.hax2uko6y)

> Acres of poorly laid out photos and poorly aligned text with several
> different font sizes, type face, and weight. theverge.com home page being
> one of them.

~~~
gnicholasgreen
I understand that we are discussing readability here, with 'most readable'
being the general consensus in the comments as being synonymous with 'better.'

That said, I see readability as something that is part of a greater equation.
Take your last example of the Verge homepage. Often designs like this are
intentionally designed to throw the viewer out of the flow of easy information
consumption and disrupt your sense of hierarchy on the page. They are trying
to get you to snack on different sections, not read left-right, top-bottom.

This sense of confusion also serves to hide the fact that they place the same
article multiple times on the same page, in different contexts. This gives the
reader the sense that there have a lot of content and a lot going on.

My point is that readablility is a sliding scale that can be used as a tool to
varying effect.

------
ungzd
All 3 examples are readable but I prefer middle, with dark grey. Pure black
and pure white is not great, most displays have enough contrast to make it
painful.

------
bloodbeard
In the comments __, Jim Hall mentions having made a BASH script to get the
ratio - but doesn 't post it. So I crapped out a Python script
([https://gist.github.com/anonymous/51a19ccb44e554affbdca69310...](https://gist.github.com/anonymous/51a19ccb44e554affbdca69310bb77d3)).

It makes me happy to see that my favorite color combo of black and plasma
orange (0xFF8000)* is well above acceptable. As is green on black.

* Among the first computers I ever used were terminals with plasma orange on black background - I've always loved it.

 __I mean the comments in the blog, not the HN comments.

~~~
legostormtroopr
This is really cool, I've done something really similar - except it grabs the
colors from the HTML itself, so you can use it to check against a HTML file
for any issues:
[https://news.ycombinator.com/item?id=13683096](https://news.ycombinator.com/item?id=13683096)

------
DanBC
I find the white on dark grey much easier to read than any of the others.

Black text on white is pretty terrible. The glare is awful.

------
davidgerard
Alt-V, Y, N is my very favourite key combo in Firefox.

~~~
bloodbeard
I completely forgot about that. It's second only in my eyes to disabling
Javascript.

