The human eye likes contrast. A page of medium gray text on a light gray background will quickly drive people away from your page, even if both shades are considered "tasteful". A good choice of color will provide the user with a healthy spread of light-to-dark areas spread in a uniform way across the page. Especially for text elements, it is very important that background and foreground are sufficiently different to allow the text to easily register.
This does not mean that all your pages should be white with black lettering. A monitor is not the same as a printed page; looking at dark text on a very light page for too long can strain a user's eye-site, because of the brightness of the light emitted by light colors on monitor. Try turning the lights off and take a look at how much you can see around you just by the monitor-light with your browser tuned to a light page or a dark page.
My point is that while dark text on light pages can be very effective, don't automatically discount light text on a dark page just because you think the former is more eye-friendly. Both have their advantages and disadvantages. As long as you're maintaining high contrast (and staying away from certain hard-to-love colors), you're better off deciding whether to go dark-on-light or light-on-dark based on aesthetic considerations rather than on eye-strain.
is
Good
No ContrastDark Example
Light Example
Good Color Contrast Examples(if you do it right)
So what's doing it right? Well, let's put it this way. You wouldn't wear a dark green jacket with a khaki shirt and wine-colored tie, and beige pants. But there's nothing wrong with designing a web-site with this strange assortment of colors. (see multi-colored example to right) The key is consistent and harmonious use of a very limited (I would propose no more than 4-5) color palette. And if you can't
seem to get inspired, I suggest you start looking closely at any patterned item of clothing you own (perhaps a tie? or minutely striped shirt?) or anything that has more than one color to it. The color scheme for this site was actually inspired by my couch, believe it or not.
One major thing to avoid is putting large areas of very similar color-level, but slightly "off", colors right next to each other. If you can call two colors "green" or "blue" or "red" you probably don't want them sitting right next to each other unless one is a shade of an another. By shade, I mean basically the same color, but on a different brightness level. For example,
| is a shade of |
|
| is too similar to |
|
In general, it is a good idea to avoid putting two very light colors, two medium colors, or two dark colors right next to each other, no matter what color family they belong to. This goes back to the idea of contrast.
OK
to
"Clash"
Multi-colored example
Too similar example
Shades example
There are some colors which should be used with extreme caution, and pretty much never used as a background that you expect any one to look at for more than a few seconds. Off the top of my head, I can't think of any reason why you would use more than one of these at a time, and then only for a splash of emphasis against predominantly acceptable colors. You may have a good reason. But think about it very carefully. Really liking hot pink is not a good justification for creating a page with a hot-pink background. But using a hot-pink graphic of lips on a black background, however could conceivably be justified for a site on lip-stick. Those o-so-bright caveat-user colors include:
aqua| chartreuse| cyan| deeppink| lawngreen| fuchsia| magenta| yellow|
to
Avoid
Warning, this link may blind you
Okay, enough of the don'ts, how about some suggestions for the do's.
In general, I suggest using 2-4 colors (and definitely no more than 5) in your color scheme. If you use more than 3,
I also suggest that some of the colors be shades of each other. You will probably
want to use a rather dark color, a rather light color and the rest in the medium
range. For example, you might choose:
1 Almost white & 1 Medium
1 Almost white & 1 Dark
1 pastel & 1 medium
1 pastel & 1 dark
1 pastel, 1 dark, 1 medium
2 medium, 1 almost white, 1 dark
etc, etc.
The main idea is to try to distribute your color choices as widely over the categories as you can, thereby
ensuring that you have a collection of colors with strong contrasts as well as harmonies.
The following is a rough distribution of colors to help inspire you. You can try out your ideas using the link to the right.
Almost White
|
Pastels
|
Medium
|
Dark
|
& Examples
Try your own Color Schemes
Sample Layout w/ 8 Colors
Sample Layout w/ 4 Colors
Sample Layout w/ 2 Colors reversed navigation frame/text frame method: using two colors
(or two colors and an accent color) make the navigation bar and the main text of the page mirror images of each other in their use of
color. The two colors can either be contrasting colors or -- as in the example to the right -- contrasting shades of each other.
the light background, dark shade background text, contrasting heading approach: this approach uses a light background with a
dark shade of the background as text, and a third color which contrasts with both other colors for accents
the dark background, light shade text with contrasting accents approach:This is essentially the same as the last approach, but using light text on a dark background
& Examples
Reverse Example
shades & contrast Example
light on dark with accents Example