As designers, our number one goal is to communicate effectively. The vehicle to achieve this goal happens to be an attractive interface that draws eyes, keeps them fixated, and initiates an action. This may sound obvious, but sometimes we are so immersed in the details of the design process — design and prototyping tools, color palettes, photo selection — that we lose sight of what’s most important. The bottom line is none of those things matter if the message is not clearly articulated. So, why (oh why!) is there so much illegible text out there? It pains my soul to see gorgeous pixel-perfect layouts that have unreadable text because of size or contrast issues.
The Struggle Is Real
Since full-screen photos and videos have become the norm on the web, designers are often presented with the challenge of inducing contrast between imagery and overlaid text. There are several ways we are solving for this — blurred or darkened background images, colored bars or shapes behind text, subtle drop shadows on text, the list goes on. However, too many times are there no treatments at all, resulting in major illegibilities.
Even Google is guilty of this, check out their Hangouts splash screen below. While the full-color images are very impactful, we have to strain to read the time. Since the background photos are on a randomizer, there is no way for Google to predict how text will read on any given image. If the image is busy or has high contrast (say for example, a nighttime cityscape), this can cause major readability problems.
Google Hangouts’ splash screen background images make it difficult to read the time
This site uses an untreated background video that occasionally blends with the headline
This homepage carousel uses full-color high-contrast background images, making it very difficult to read any of their headlines
Sites That Do It Right
Pushh uses a combination of techniques to ensure legibility: a blurred gradient-overlaid background image and a subtle drop shadow on the headline
Basic uses large type over a ghosted and blurred background image
Do uses levels to slightly darken their background images (sidenote: how crazy is it that they were able to purchase the domain do.com?)
In an increasingly visual world, photos and videos are likely to become even more prevalent. As a result, we’ll need to master the craft of placing text on imagery. Together, let’s empathize with our users and prioritize legibility over everything else.