Can You Read Me NOW? (Low Contrast = Lower Usability)

---

Filed under: Website Design | Websites: The Basics

Today we have a quick tip that’s more of a reminder + gentle wake up call rolled into one.

The concept, like so much of what we focus on in web design, comes down to common sense—yet it’s exceptionally easy to overlook.

We’re blind

In a way, we all become blind to our own web designs over time.  We don’t—and can’t—see them in the same way our new site visitors see them. We get used to their quirks. We know what the text says without having to read it every time we visit the pages. We know where everything is located already,  so of course we never have problems finding what we’re looking for.

New visitors know nothing

New visitors arrive at our sites with fresh eyes. They don’t know where anything is. They don’t know what any of our text says. They don’t know where information is located.  They arrive with the goal of finding specific information and they begin working toward that goal the moment they enter our sites.

Making it oh-so difficult

We need to roll out the red carpet. We need to make sure our visitors have positive experiences when they visit to our site. Sounds like generic, no brainer advice, right? Perhaps, but it’s very important. Here’s why:

So what does this all have to do with contrast?

Yesterday I came across a local business’s website.  Here’s what the front page looked like:

Especially at first glance, it’s a pleasant looking design.

As I looked around to locate the company’s location and hours though, I quickly began to find  it very difficult to read the text.

At the bottom right of the image, the orange text on the tan textured background was nearly impossible to read.  Other text was so small and light (like the text to the right of the big circle in the upper right and the “call for summer hours” text in one of the right hand sidebar boxes) that I had to blow up the size of the site on my monitor to read it.  There was almost no way I could read the tiny orange text at the bottom middle of the page that listed the design company’s credits until I leaned in toward my monitor and scrunched my eyes a bit.

Here’s a zoomed in closeup of the right hand side of the page so you can get a better sense of what I was seeing:

And here’s a closeup of the tiny orange text near the bottom of the page:

The worst part?  I don’t wear glasses.  For people with poor eyesight, reading the text on this page would be even more challenging.  Even the page’s main content (the medium-gray text in the middle) didn’t have enough contrast to “pop” away from the pure black background so I could read it without straining.

Great news. This is an easy fix.

Again, we have a pleasant design here.  It’s been planned and, I’d imagine, lovingly put together by a creative designer and then finally approved by the business.  And yet much of the text is downright difficult, if not impossible, to read.  The low contrast of orange on tan as well as medium gray on black, compounded by some extremely small font sizes, simply means it’s hard for visitors to get the complete picture the page is attempting to communicate.  (And we’re not even talking about color blind visitors here.)

Increasing font size and increasing contrast so that all text is easy to read would allow visitors to see what’s being presented and easily locate the information they care about.

Your key takeaway today:
Adequate contrast will improve visitors’ experiences and increase the likelihood they return to your site and purchase your products or services.

See other website designs we helped create.

Can visitors read your site’s text?

Next time you’re looking through your site, try to see it through your visitors’ eyes.

Be honest. Is there any text that’s perhaps a teeny-tiny bit difficult to read?

Address the issue and you’ll immediately improve your visitors’ experiences and website’s effectiveness.