Is Your Low-Contrast Design Costing You Clients?

Web design trends come and go.

Do you remember the 2000s, when websites were textural? Backgrounds looked like torn paper in a scrapbook. Text tended to be blocky and bold. Call-to-action buttons were so glossy they looked wet. Drop shadows erupted in every direction, trying desperately to make graphic elements pop up off the page.

A few years ago, designers decided that look was over, so they ran in the opposite direction.

Today, backgrounds are flat, graphic elements are simpler, and palettes have been drained of color. Evocative fullscreen images and, more recently, video, have become the gold visual standard. Text size is bigger even as the text itself has slimmed down, with designers adopting the lightest-weight fonts they can find.

The effect is clean, elegant, and sleek. Except for when you can’t read it.

I don’t know why web designers have such a big blind spot over this. It doesn’t matter if it’s textured or minimalistic, bold or understated, 3D or flat: Good design isn’t good if it’s not functional.

There are two things about current design trends, in particular, that are hindering legibility. The first one I want to talk about is text over too-similar backgrounds.

The rise of low-contrast

In the early days of the web, the standard page colors resembled those of a book: black text on a white background. These days, you’re more likely to see gray text on a white background or, increasingly, gray text on a gray background. If gray text on a gray background sounds unreadable, that’s because it is.

Take a look:

What looks silly in the above example becomes ridiculous in real life. Can you read the gray-on-gray navigation items on this popular website? Because I sure can’t:

And it’s not just gray that’s the problem. It’s any low-contrast pairing of text and background. And that pairing gets more complicated when the background is an image.

Low versus high contrast images

In photography, a low-contrast photo is one that doesn’t have much variation in brightness. Here’s the same winter scene altered to be low-contrast on the left and high-contrast on the right:

As you can see, the low-contrast version is all muted midtones and the high-contrast version is all highlights and shadows. Generally speaking, high-contrast images look better to most people. But when you pair these images with text, it’s a whole other ballgame.

Getting lost

Which brings me around to my second issue with web design trends these days: text over images. Because far too often I see text get completely lost over images. I’ll show you a quick example using the winter scene:

The white text fares a little better, but not by much. There are still simply way too many bright and dark areas in the photo, washing out portions of the text and making it difficult to read.

On the move: when text goes rogue

Matters get even more complicated on mobile websites, because the text moves as the screen size shrinks and expands. And if you haven’t chosen just the right image, suddenly your well-placed, completely legible text becomes a lot less so.

I’ll show you what I mean. Here’s a beautifully-designed website for a bespoke suitmaker seen at desktop size. Notice how the callout text is thoughtfully oriented over a dark section of the suit photo:

Now, check out what happens on mobile screen sizes:

Yikes.

Okay, so popular design solutions don’t always work well. Why should I care?

It’s bad enough when text is hard to read to read under average conditions, but consider your older and/or vision-impaired clients, or clients that are looking at your website on a small or low-quality screen or under the glare of harsh florescent lights or bright sun.

And if that doesn’t convince you, maybe this will: if your on-trend design isn’t working, your message isn’t working. And if your message isn’t working, you’re losing clients. Period.

So pour yourself a cup of coffee and pull your website up in a browser. On each page ask yourself: is this text easy to read? Ask a neighbor or friend who’s never seen your website for their honest evaluation. You may be surprised what others find that you don’t.

I admit it, my website needs some improvement. Where do I start?

For regular text, it’s as simple as adjusting either the color of the text or the color of the background to make them more different from each other. Increasing the size of the text could help, too.

For text over images, you have a few options. One is to dial down the contrast of your image, as they’ve done in this example:

Another is to set a solid background color behind the text itself, so it doesn’t matter where the text lands over the image — it’s guaranteed to always be legible:

The bottom line

Web design trends will change through the years, but readability and accessibility are always “in.” Every time you upgrade to a new look, make sure you haven’t lost your functionality, too, and you’ll be well on your way to retaining clients and boosting conversions.