Good background and text colors for a website with both photos and text

Question

I put both photos and significant blocks of text on a couple of websites I run. Currently, I'm using white text on black or dark gray. It's getting a bit old, and I think I'd prefer text darker than the background - but, it's very important to also give a good background color for the photographs (which don't have any consistent color content).

What colors should I use for text and background? Ideally, someone would suggest specific RGB values, but I'm also interested in general themes/concepts as well as pointers to more information.

Answer 1

Rather than change the background for the entire site, consider simply framing the photo with a background color "matting", and then making the rest of the site background match the overall sight design.

This gives you greater options:

• For starters, it means you can avoid having the entire site be a boring neutral background.
• It lets you pick a different background colors for text and for photos. For text, high contrast is crucial for readability, and black text on a white background is best.
• You don't necessarily have to be locked into a single background color for all photos. With the right website engine you could conceivably pick and choose the best background for the particular photo.

Here's two examples from one of my websites. The site background is pink, though the content is black-on white. Every photo though is separated from the rest of the content by a series of borders. Starting from innermost to outermost, I have:

• The photo itself. The colors and luminosity, of course, can be anywhere. I picked a very dark and a very light one to illustrate the range.
• A thick border, either black or white, that contrasts & frames the photo. The dark photo gets the white border, and the light one gets the black border.
• A thinner white border. Note that this is only noticeable when the above border is back; when it's white, it visually merges into one (though it's still separate in the HTML/CSS). The purpose of this is to ensure that there's some separation between the dark of the dark photo or thick black border and:
• The outermost 1px black border. This border separates the photo (regardless of whether it's dark or light) from the white of the background.

Overall, I think it's too difficult to get a background that looks good with the various photos, and works well with text, and fits into an appealing sight design. With some clever design tricks, you don't have to try.

Answer 2

Photographic 18% grey is ideal for photos. You do not have to use that exact shade of grey but it should be grey, in other words completely neutral. Any tint to the background will affect people's perception of colors.

I know a number of popular photo sites use white, but most were not designed for photographers. In many sites such as Flikr, it almost seems photographs are secondary content... there's too much stuff around the images! I also know Picasa Web was criticized by photographers for their white background.

On my personal gallery (Neoluminance), I wanted color but I still made sure photos appeared on grey. Neocamera and DPReview were also designed for viewing images first.

Answer 3

There is no magic solutions and I suspect you already know the "rules":

1. Colors around the picture will change the way a viewer perceives the colors in the picture - so you need neutral colors for the background and text (white, black or gray).

2. Pictures tend to look better on dark background, so that gives you white on black or white on dark gray.

3. Text is more readable in dark on light color combination - if you consider point 1 above that means black on white.

So, if you want the pictures to look better (and you are willing to sacrifice readability of the text) you go with white on black/dark gray.

On the other hand, if you have a lot of text and you are willing to make the pictures look slightly worse you should go with black on white.

Or, you can use a website design that uses non-neutral colors, this will change the way pictures look but give you more creative freedom with your design - not a good choice for a site for showing images but probably acceptable in a site that uses the images in a "supporting role" to the text content.