Contrast and Color with Expression in a Web Site

Color selection for a web site can be a challenge.  Some people want to have colors that are featured in their logos while others choose to contrast those colors against other shades, and still others follow an eclectic path to selecting their colors.  There certainly is no universal 'right' way of arriving at your palatte, but beware, because there are several wrong combinations that can be mixed together.

The priorities that I enlist in making selections are as follows:

  1. The most important rule to arrive at however is to consider the contrast of text and navigation to thei background elements.  If your text isn't legible then you simply aren't comunication, and if your navigation is lost then so aren't your readers.
  2. Colors reflect mood, and mood determines the interest someone has in your site.
  3. Logos reflect your brand, and you want your palette to have color symetry with it.

 

Starting from the top of the list, contrast is by far the most important feature to consider.  Take a look at the web's most popular sites; Google.com, Wikipedia and Facebook.com for example.  All of these sites are targetted at the broadest group of web users.  They have kept their text contrast to the most basic, black on white, and most frequently, blue links and maroon or navy headings.

These brands are all well established, and everyone knows why they are coming to these sites, they aren't just randomly arrived at from a web search. There color combinations may get boring at times, but they serve an important purpose.  They put the content first and far above all other considerations of matching their logo colors.

But most likely, your website doesn't have the noteriety of these big players.  You need to rely on mood as much in attracting visitors to your site and keeping them interested enough to look through your content.  Your content has diminished at all in its need to be interesting, but you have to keep your reader content to read your content, so this is where mood comes into play.

 

Comments

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options