Colour Comparisons

Below are several comparisons of different foreground and background colour schemes. When you choose colours for your own web site, you might want to have a look here for some things that look good and somethings that don't.

This page relies heavily on style sheets, so if your browser doesn't do a good job with style sheets, you might not see the intended colours.

• This is a fairly reasonable set of colours with good contrast:
  This is some text.
  It has color: #000000; background-color: #FF9999;
• Black text on a dark background has poor contrast. While it's possible to read this, it would be very tiring after a few lines.
  This is some text.
  It has color: #000000; background-color: #336633;
• Switching to white text in the above example makes a huge difference.
  This is some text.
  It has color: #FFFFFF; background-color: #336633;
• You don't have to have straight black-and-white to get good contrast. More intermediate colours can stand out well against each other if they're chosen carefully.
  This is some text.
  It has color: #FFFFFF; background-color: #666666;
• Even with good contrast, some colours just don't look good together.
  This is some text.
  It has color: #336633; background-color: #FF9999;
• ...and some colours just shouldn't be used as a background colour.
  This is some text.
  It has color: #000000; background-color: #FFFF33;