Do you have more trouble reading websites these days? It’s not just you

Do you ever squint at your smartphone, or have trouble reading text on a website? It’s not just you.

As CBC Radio technology columnist Dan Misener explains, parts of the web really are getting harder to read.

What makes websites harder to read?

The big factor is contrast — the difference between the lightest colours and the darkest colours. If you have pure black text on a pure white background, that’s very high-contrast, and comparatively easy to read.

• AUDIO: Size matters when designing fonts for mobile devices

But recently, there’s been a trend in website design towards lower-contrast websites. That means a smaller difference between light and dark, which can make text more difficult to read. 

Developer and technology writer Kevin Marks. (Kevin Marks/LinkedIn)

In recent years, a number of designers, technologists, and web accessibility experts have highlighted this issue. But it’s getting renewed attention because of an essay by well-known developer and technology writer Kevin Marks, called “How the Web Became Unreadable.”

In it, he argues readability comes down to the choices web designers make — and the trend is toward designers making text greyer and skinnier. That’s an issue for many people, he writes, including “the elderly, the visually impaired or those retrieving websites through low-quality screens.”

Why are web designers doing this?

In a word: aesthetics.

“A lot of this is about fashion in design,” he told CBC Radio. “There’s a particular look that is popular at the moment, that is this very light sans-serif-type look. It’s a minimalist style. Obviously there are times when you want a very minimal design. But when you’re trying to design something that is very information dense, it doesn’t really work.”

He said this greyer, skinnier typeface look is also driven by the availability of super-high-resolution screens on smartphones, tablets and laptops — which allow designers to use fonts that were impractical a few years ago.

Higher resolution screens on devices like Microsoft’s Surface Book have allowed designers to use fonts that were impractical a few years ago, but that users may find more difficult to read. (Evan Mitsui/CBC)

Are there any standards for web readability?

The World Wide Web Consortium is the standards organization for the web, and they publish something called the “Web Content Accessibility Guidelines.” It’s a technical standard, and it has specific recommendations for the contrast ratio of text on the web.

As Marks explains in his essay, if the text and background of a website are the same colour, the ratio is 1:1. Black text on a white background has a contrast ratio of 21:1. And the Web Consortium says 4.5:1 is the minimum ratio for clear type, but recommends a contrast of at least 7:1, to aid readers with impaired vision.

Web designer Lea Verou designed this online tool, which allows users to see the contrast ratio between any two colours. This screen grab shows a ratio of 21:1, which is pure black text on a white background. (leaverou.github.io)

Beyond that, large tech companies like Google and Apple have their own design guidelines, which also recommend specific contrast ratios. And here in Canada, some parts of our country have web accessibility regulations enshrined in law.

So standards and guidelines exist. The issue seems to be that web designers and technologists aren’t always following these guidelines.

Who are the worst offenders? 

In his article, Marks called out a number of companies, including Google, Apple and Twitter. He also pointed out that Apple uses lower-contrast type than its own guidelines recommend, in a kind of a “do as I say, not as I do” approach.

Apple and Google are particularly powerful because they control the default fonts on a huge number of devices. Marks has also called out big newspaper websites like the New York Times and the Guardian, both of which he says have switched from plain black on white text to greyer colours over the years.

This screen capture from the World Wide Web Consortium shows the high contrast used in early web browsers. Many people find more modern websites difficult to read, because they use lower contrast between type and background. (W3.org)

Marks said it’s important to watch what the big players do with their websites because they’re influential, and their design decisions get picked up by others.

How can I make web text more readable?

The good news is there’s lots you can do. David Berman, a communication designer and accessibility expert in Ottawa, points out all major operating systems have accessibility settings that can help make text easier to read. 

“Each one of them has settings where the user can turn dials and increase the size of type, or make the letters higher contrast, or to turn on the screen reader, or to shift to black-and-white mode,” he said. “Sometimes on my phone, I just shift it to greyscale mode just to save battery.”

The instructions, of course, depend on your device.

But if you find yourself squinting at your screen, you’re not the only one, and it’s worth spending a few minutes looking at the settings to see if you can make the web easier to read.