creating clear contrast consists of creative color combinations

February 27, 2007

Never-mind how long it took to think of the title for this article, we are here today to talk about a serious issue; contrast.

I see a lot of websites that don’t have enough contrast between text and background color. I know that there are some people who like the whole dark look of a black background and blue text (or any other horrible combination). Let me be the first to tell you; don’t do it, it looks stupid and no one can understand it. Please stop.


If you think this looks cool, please reconsider.


For those of you who havn’t passed out from a seizure from the straining of reading the above text, read on.

You have to have some contrast between your text and background color. As you can see, it’s very difficult to read the text. Anyone browsing your site will either pass-out tyring to read your text or leave your site the conventional way. If your trying to go for a goth-type look (most types of these sites make this mistake), try doing something a little different then your Gothic colleagues.

Browse the net for some of the more popular sites. If you notice, no matter what color the background is, the text is always in sharp contrast. This is on purpose! You want people to read what your writing, otherwise why bother?


See the difference contrast makes?


Now you may think that blue text on a black background isn’t that bad; you could read the text above OK. What is the big deal, right?

If your site has 1 sentence, then you’ll be OK. But from experience (and plain common sense), most sites have more then 1 sentence!
Look how horrible this looks:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fringilla ullamcorper risus. Integer viverra rutrum pede. Donec ut mauris id nunc lobortis ultrices. Etiam pellentesque felis eu dui. Nunc et justo ac velit iaculis tincidunt. In hac habitasse platea dictumst. Aliquam erat volutpat. Ut pretium pellentesque est. Morbi auctor, ligula sed sagittis mattis, nisl nisl placerat massa, eget rhoncus lectus velit id dolor. Curabitur sit amet diam ac lorem tincidunt commodo. Nunc velit mauris, egestas et, aliquet nec, tincidunt et, dui. Quisque a nisi. Integer bibendum molestie nunc. Duis vehicula mi et eros.
There are also some designers that like to go with the same color and text, but with a darker shade on the text. This is OK. If you’ve gotten this far in reading, that proves it.

If for some reason you still insist on creating such atrocious combinations, then at least have the decency to increase the spacing between letters (kerning). This can be done using CSS.



  1. Nice post, helps a lot!

  2. Yeah, I can’t stand when I see sites that make this mistake.

  3. A helpful and informative post. Greatness. Keep it up. 🙂

  4. […] Also check out a previous post that I did that can help you out with getting good contrast between text and background color. […]

  5. […] if you make the mistake of using a crappy small font and a horrible color scheme between text and background, then you are setting yourself up for design hell. Stay away from tiny fonts with serifs. Please, […]

  6. […] have spoken about this before. Please stop. Thank […]

  7. Very interesting… as always! Cheers from -Switzerland-.

  8. Whoa, Switzerland! Cool. Thanks for the comment!

  9. very interesting.
    i’m adding in RSS Reader

  10. Great Stuff

    Great Stuff

  11. Good common design sense. Thanks for posting that article; you may have helped prevent eventual blindness in some people! 😉

    It’s also bad when someone uses a font that is hard to read at a small size, like some graffiti font or ‘street’ font; if they’re going to use some complicated font, they need to make it larger.

  12. Thanks Jeff. I appreciate your comment. I’m glad that there are people out there who can relate to what I’m talking about. Hopefully this article can catch on and everyone will be saved from god-awful color combinations. 😉

  13. There is obviously a lot to know about this. There are some good points here. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: