Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
I believe that what you are referring to is a "watermark", like the lightly embossed corporate logo on expensive stationery. –  Evik James Feb 23 '12 at 1:54
1  
Depends on the brand logo. You could also place the image in black and white to get over the different computer/ browsers different color issue. –  Viraj Feb 23 '12 at 2:07
    
Since you not only have to allow for different rendering engines on different platforms using different monitors, and browsers using different text sizes, but also have to allow for users of different ages and visual disabilities, my instinct is that the only safe option is never to have image backgrounds behind text. Honestly if I had a penny for every brand logo that marketing wanted to plaster across the background of the interface...really it's so inappropriate. Help them, don't hinder them. –  Roger Attrill Feb 23 '12 at 10:09
    
What's the context? Online/offline? Full-size/mobile? –  dnbrv Feb 23 '12 at 13:07
    
To expand on @RogerAttrill's point, if you are going to do it, err heavily on the side of legibility. What's the worst case if you make the brand image too subtle? The user won't notice it; not a big deal. –  peteorpeter Feb 23 '12 at 18:21
show 2 more comments

4 Answers 4

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).

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.