The best colors for a website’s content

8 Comments

eyeNothing can influence your website’s visitors more than its colors. Colors create the mood and set the matching tone for your content. The right colors in the right places can excite, inspire, and encourage your visitors to dig deeper into your website. On the flip side, the wrong colors in the important places can destroy all of the hard work you put into the graphic elements of your website design.

Many beginners to website design ask “What are the best colors for a website design?” Well, before you can even decide a total color pallet for your website, you need to know what are the best colors for your website’s content.

After reading this post, you’ll know.

It’s all about the eyes

What’s the number one reason a person visits your website? Is it for the ultra-cool graphics and design? Nope. People come to your site for one thing only: to read your content. Granted, your eye-popping graphics many intrigue a visitor enough not to click the back button on their browser right away. But if your content (the main text of your website) is hard to read, then they’ll abandon your website and you will have just lost a visitor for good.

Choosing the best colors your website begins with choosing the best colors for your website’s content — colors that make reading easy on the eyes. But just what are the best colors? Before getting into that, let’s look at some bad color choices.

What not to do

If you really want to strain people’s eyes and annoy them to extremes, then by all means do any one of the following:

  • Put white or light text on black or dark background
  • Use two colors that have little contrast between them
  • Have lots of black text on a yellow background

Take a look at this example:

Here is an example of white text on a black background. Many gothic, grunge, and (sadly) graphic design websites use this. Unfortunately, if the visitor is going to have to read a lot of text like this, it WILL put a strain the eyes. How do I know? Years of research in the field of website usability has proven so.

I don’t know about you, but reading that white text on a black background really bugged me. And you know what? It bugs most website visitors.

Here’s another:

I actually visited a website that used these colors for the background and the text. Maybe the designer thought it added a feeling of calming serenity to the site. But I just ended up getting a splitting headache trying to read line after line of the stuff.

One more:

Having a yellow background with black text might not seem too bad, but it has been proven to cause eye-strain if the majority of the content is displayed this way. Use this only when you want to draw attention to short sections of text.

The best colors for a website’s content

I realize that it might not be the most flashy and eye-catching, but the best colors for a website’s content are black or dark-gray text on a white or very light, pastel-colored background. These combinations create the right amount of contrast for reading while avoiding or lessening the strain on the eyes. (By the way, Newbie Website Design uses dark-gray text on a white background. The headings and bolded text are in black.)

Final thoughts

As stated above, the main reason people visit your website is to read your content. Even if your graphics are stunning and the design is top-notch, no one will stick around or visit again if the text is hard to read. Make it easy for them by choosing dark text colors on a very light or white background.

Now, the only thing you need to worry about is writing good content! ;)

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



8 Responses:

  1. Mel

    Aug 26, 2011 at 10:08 pm

    Thank you for your good and concise article. I find SO many websites using dark background / light font combo that I want to scream: I CAN”T READ YOUR CONTENT! IT HURTS MY EYES! (sorry for my rant). I don’t even stay long enough to even try to read the content. They lost me at first glance. This combo is only nice if the visitor is looking at the site as if it were a painting. If anything has to be read, forget it.

  2. man of the moon

    Sep 03, 2011 at 11:34 pm

    Your title post should be: worst colors for website. Reading your article I couldn’t find the best colors as you claim.

  3. Wayne Chong

    Oct 03, 2011 at 7:48 am

    Then, what color should use for dark color background?? It’s means by archived a good contrast, we ignore the group of (white text + black blackground) anymore??

    For Mel:

    If like what u mention, the world will lost alot of nice black color design webiste anymore!!!

  4. Pawan

    Apr 20, 2012 at 6:52 am

    please elaborate more with more examples.The article is inadequate.

  5. Shilpa Singh

    May 24, 2012 at 7:08 am

    Thanks for this useful tips. It helped me to choose my color scheme.

  6. David

    Sep 06, 2012 at 7:42 pm

    Great article, Thank you. Please can you help me, I would like to know if using 3 different colours of text with a mixture of bold and normal text would affect google indexing my content. I have been advised that black plain text on the white background is best as you say , but you don`t mention a mix of colours result. I do hope you can advise.
    Kind regards David.

  7. Sarah

    Feb 27, 2013 at 3:08 pm

    What useful information for beginners.
    Thank you.

  8. Kevin Jennings

    May 08, 2013 at 4:54 pm

    Agree totally with the comments on the clarity value of white/near white backgrounds, and black/dark text. The only good news about black backgrounds is that when you make a web design/site makeover proposal to a prospect who has got this on their site, it is an easy win to point him to one of your own sites which avoids this – it is an easy way to gain a credibility point!


Share your thoughts below: