Should I place an image behind text data?

Question

We are building a site now and are considering adding a "brand" to the data section in the center of the layout with a subtle background image. There is some concern that with different browser settings the "brand image' might be either so light in contrast as to be un-defined or too dark and render the text above it hard to read. Is this a workable idea or something best left undone?

Answer 1

I'm going to go against the grain here and say

No

Don't do it. It adds nothing to the user experience, and potentially could detract from readability/usability.

Answer 2

While it's true that there is variation in colour between computers and browsers, the differences have been dramatically reduced in the last two or so years:

1. Historically Macs used a gamma of 1.8, but in Mac OS X v10.6 (Snow Leopard), they changed it to 2.2 to match the native gamma of Windows computers. John Nack from Adobe has a great summary of the effect of this change to web content on his blog.
2. For a long time, Safari was the only browser that implemented PNG colour profiles. Unfortunately, until Mac OS X v10.4 (Tiger), Safari would apply the computer's calibrated colour profile to untagged PNGs (that is, PNGs without any explicit colour profile included). That caused a lot of sites using PNGs to seemingly have issues with colour matching. Since that change was made in Tiger (and more recently since colour profile support was added in Firefox) the effect of cross-browser issues with colour reproduction has been greatly lessened.

Now, the main thing that affects colour consistency across users is the users' own hardware. The quality of monitors, backlight type and brightness and type (LCD vs CRT) can have a profound impact on colour fidelity. While there's no way to really be sure of how every user will experience your site, you can at least test the design on machines that have not been properly calibrated, and ideally on low-quality screens (where colours such as light grey often get "blown out" to white).

Answer 3

This is a workable idea and a commendable one at that.

It may not have been pursued actively by most UI designers because of the constraints you already noted. However, with careful design, it can certainly work and provide a decent visual experience without being either distracting/disruptive or interfering with the foreground text.

One other point would be discretionary use. Avoid using it more than once on a page; for cases where the text is crucial and clarity/accuracy is very important. This is because a character can appear to be another, when seen against a background image, leading to misinterpretation.

Finally, I believe the concept is not new in regular graphic design.

Answer 4

A brief search on google brings up some interesting articles on how color is rendered in browsers and what are the subtle differences

A Brief Comparison of Font and Background Colors Rendered Across Major Browsers in Mac OS X

To quote what the site says

There is an unfortunate side-effect to Websites that sport light text on a dark backgrounds: in general, the light-on-dark font appears as more bold than its dark-on-light counterpart.

The truth is, it is not actually more bold (in terms of the actual number of pixels that make up the stroke width), it simply appears more bold due to the anti-aliasing of the font by the browser and operating system.

However I am not sure if the above information is applicable to your case since I have no idea about the color of the text you are using and the corresponding background image.However with regards to images you must remember that the color intensity of the pic can vary greatly depending on the color profile of the image. So while rendering your backgound images,that is something you will need to test.

Another consideration you will have to consider is that certain monitors display color more vividly than others and you should check to see how your text is rendered against the images in that case.

In closing ,I know I havent given you a yes or no answer :),but if your design requirements need such branding do ensure you cover all the possible bases before going for it