The greatest possible emphasis is black text on a white background

Images probably doesn’t look that bad in grayscale, but open up badfireworksimage.jpg on the companion Web site and you’ll notice that the background is bright green. This color detracts from the fireworks image.

Because of this, your images should stand out against everything else on the page. Images establish a presence, and without them, your page will look boring and unusable. It’s bad enough for the text to appear stronger than the images, but having the background conflict with them is a million times worse.

There’s a saying in design that involves colors: “The first color is white.The second color is black. The third color is red.” This saying refers to the best colors that you can use in design.


The greatest possible emphasis is black text on a white background. When you want to vary your color, red is the next best choice because it’s a primary color that’s in direct contrast to black and white. That’s why Web sites with lime-green text on a black background are incredibly difficult to read.The same thing happens with images.When you have an image with a background, it will look good in contrast with white or red.The emphasis makes your images look better to your visitors.

Red Hat uses very good contrast in their images, with the black, white, and red standing out. Although they include a few shades of brown and gray as well, you can see how the red stands out against everything else on the page. This makes reading and understanding the images a lot easier. As you can see, the contrast makes the page pleasing to the eye.

Now that you know the basics of color, let’s apply this knowledge to images. Your photographs won’t conform directly to a color scheme, of course, but any images that involve text or basic shapes can be melded into your page’s style.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>