ConceptionJFG
All articles
Technology2 min read

Colors and readability: a site that’s pleasant to read

A beautiful site that tires the eyes is useless. Enough contrast, a big enough font, not too many colors. Here are the basics that make a site easy to read.

By Jean-François Gauthier

We often pick colors on a feeling: “I like beige,” “pale gray looks classy.” The problem is that the result is sometimes lovely on your big screen… and unreadable on your client’s phone in the sun. A site doesn’t need to be spectacular. It needs to be easy to read. Here are the few simple rules that make all the difference.

Contrast is the foundation

Pale gray text on a white background feels elegant in your head, but it’s exhausting for the eyes. The rule is dead simple: the bigger the gap between the text color and the background color, the easier it is to read. Dark text on a light background, or light text on a dark background, that’s what works. Avoid soft combinations like gray on beige or yellow on white.

A free way to check: look at your site in full sunlight on your phone. If you squint to read it, so do your clients. And a good share of your visitors are over 45, and their eyes deserve a little generosity.

Text big enough to read effortlessly

Many sites use text that’s too small because “it looks cleaner.” But no one wants to zoom in to read your offer. On a phone, your main text should be comfortable without pinching the screen. Let your paragraphs breathe too: space between lines and around blocks makes reading far gentler.

  • Dark text on a light background, or the reverse. Never two close tones.
  • A comfortable text size, with no need to zoom on mobile.
  • Space between lines and around paragraphs.
  • Two or three colors max, not a rainbow.

Two or three colors, not thirty

The temptation is to use all your favorite colors. The result quickly looks like a 90s brochure. Instead, choose one main color (your brand’s), one accent color for the important buttons, and neutral tones for the rest. The fewer colors there are, the more weight the remaining ones carry. White space and empty space are your friends: they make your content stand out.

A site doesn’t need to dazzle. It needs to be readable without any effort.

Thinking of everyone

About one man in twelve struggles to tell certain colors apart. If your only cue for “this is clickable” or “warning, error” rests solely on green and red, some of your visitors won’t see it. Add a word, an underline, an icon: never let important information rest on color alone. That’s accessibility, and it helps everyone, not just a few.

If you’re not sure your site is pleasant to read, write me and we’ll look at it together. Often, two or three small tweaks to color and size are enough to make it far more welcoming, without redoing anything from scratch.

Share this article
  • site colors
  • readability
  • contrast
  • web design
  • accessibility

A web project in mind?

Like these ideas? Let's put them to work on your site. You'll be talking directly with the founder.