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.
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.
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)
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.
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."
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
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.
> 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.
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.
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).
15 comments
[ 3.3 ms ] story [ 51.1 ms ] threadMost 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)
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.
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.
Black text on white is pretty terrible. The glare is awful.
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...
> 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.
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.
Repo: https://github.com/data61/wcag-zoo
Screenshots: https://github.com/data61/wcag-zoo/wiki/Screenshots