The overuse of white backgrounds on the web

White backgrounds add to much glare.

[lgn]

Five years ago, everybody was using backgrounds and textures on the web. It now has seem to gone
the other way.

Other than our site, I can find few profesional ecommerce sites that use backgrounds.

We take a background image that is relevent to our site content, and we then wash out (soften the image so we have a good contrast between the background and the text. It also reduces the image size to a mere 6K for a complex pattern.

I myself find a white background, to stark, to much glare. Its boring.

Just because everybody is doing it, does not make it good design.

Any opinions.

[lgn]

From Brett's comments, he must be left brained :)

[rogerd]

Maximum contrast usually means maximum readability. If you've ever tried to read some advertisers misguided attempt to put text on a dark or patterned background, you appreciate good contrast. The biggest difference, IMO, between print readability and screen readability is that print may have to be read in varying lighting conditions (the worse the light, the more important contrast is, particularly for old guys). Computer screens are usually self-lit, of course, so I thinkt the designer can take a few more chances and still achieve readability. (Offseting this, of course, are varying display resolutions, color rendering, etc. By comparison, the millionth copy of a John Grisham book or Time Magazine looks pretty much the same as the first.)

Personally, I like mild variations on the black & white motif, although more than half the sites I work on use it. I just tried a ivory background with dark brown type, and found it quite readable and pleasing in appearance. Another one keeps the white but uses a dark gray type.

Another guess as to why white is so popular: images. Images often have white backgrounds - logos one gets from suppliers, images borrowed from other sites, etc., may take additional work if you need to put them on a non-white background.

[john316]

HarryM

Thanks for posting that!

I picked up a new mac a few days ago and got headaches almost immediately, I thought it was the fumes from the new machine, but after tweaking the brightness, all is fine.

Its great what you can pick up here at WebmasterWorld!

Thanks again!

John

[Jon_King]

As DrDoc stated,

If a page is likely to be printed we will use white as a background.

I actually had a client insist I redo a site because he claimed it was assumed a viewer could print his pages. He claimed it was an error on my part. To some extent he was right.

For lists of parts and long descriptions which all know can be difficult to read on a monitor, these pages should be designed to be printed (IMHO). This can also be done with a seperate 'printer-friendly' page.

We now have this 'page-print' question as one of the standard elements of webpage design to be considered.

[Syren_Song]

I don't think there's any doubt that black text on a white background looks very authoritative. It also lends an air of credibility to the site.

Unfortunately, when you look at black on white all day, every day, it can get hard on the eyes creating all kinds of eye strain.

Having worked as a secretary for many years doing a great deal of transcription and general typing, I discovered the kindest thing I could do for myself was to change my color settings. When I left the screen stark white with black text, I was prone to many headaches and a great deal of eye strain.

Many other secretaries felt the same as I did and everyone started playing with background colors as soon as we had the option to do so. Almost no one in any of the offices I have worked for used stark black-on-white settings. Some used light text on dark backgrounds, some used light backgrounds with black or some other dark colored text. Most folks found they had fewer headaches at the end of the day and their eyes felt better as well. People needed fewer eyeglass prescription changes too.

While there may be advantages to using stark white backgrounds, I think if you want to have folks stick around to read everything you've got to say, the white really should be toned down a little bit. Even allowing for variations from screen to screen, monitor to monitor, gamma settings to gamma settings, it's just easier on the eyes.

There always seems to be just a bit of tension that develops in the shoulders, back and neck when reading large amounts of information from stark white backgrounds. And the eyes are greatful for a break from the stark whiteness. I believe that's one of the reasons people get tired and start rubbing their eyes after they've been reading a book or magazine for long periods.

It's not just that your eyes are tired of reading or spending too much time focused on something so close to them. They're tired of the stress of an unrelieved stark background color and too much contrast.

<edit>typos</edit>

[lorax]

FWIW - I never use black text anymore. I set my style sheet so type is #333333. While I haven't observed a glare issue this change does soften the contrast somewhat. As one who reads a lot of stuff on screen - it helps me. :)

[Jon_King]

Syren_Song

One thing I have found helpful is the monitor color temperature.

The default for most monitors is too blue/cold. If you warm up this temperature it makes the whites much easier on the eyes.

There are many studies regarding the effects for warm indoor lighting and warm monitor temperature and it's comforting aspects.

I think Lorax's suggestion is good as well.

[pageoneresults]

I stick with the tried and tested black on white whenever possible.

I'm fortunate in that I have access to at least 20 different monitors during the day, both Mac and PC. The differences between monitors are somewhat shocking.

Not long ago, I bought a Sony flat screen, mid-range model. I ended up returning it because the brightness and the colors were just too true for my eyes. Flat screens have a setting for backlight and man did that wreak havoc on my eyes.

Since I work with more than handful of industrial sites, black on white is mandatory. We have quite a few pages that find their way to the printer and of course black and white prints the best. Do you have a background color? You do realize these print as grayscale when printed, correct? Ever see what type looks like on a grayscale background? Sometimes difficult to read depending on the colors.

On some monitors, the varying shades of black are not noticeable i.e. #333333, #999999, etc. Look at those colors on a flat panel or some form of Press Match monitor and you can clearly see the different shades of black.

My main career is in the print industry and I work with color everyday. I have just about every color guide that Pantone publishes. I realized long ago that the web is not a print medium and what I do in traditional marketing (color wise) may not translate well in web marketing.

Another issue when using colored backgrounds is now your images need to be perfect so that they merge with the background color seamlessly. They might look great on your monitor, but look at them on a higher end monitor that shows true color and you might be somewhat surprised at what you see.

The users color settings can really hamper the use of background images and colors. Gifs are a problem at 16 bit vs. 32 bit. You may not see banding at 16 bit, but at 32 bit it might look like the image was built using steps (banding).

Hours upon hours of black and white can cause eyestrain. If you have a site where visitors are spending hours viewing pages, then subtle hues might be appropriate. For the general surfing audience, I think black and white are the safest.

We usually have graphics in place to help break up the black and white. My understanding is that users are typically at your site for information. Your targeted audience will usually determine the type of color combinations that you use. In an ecomm environment, I would always use black and white for primary information and colors to help draw attention to important areas.

[Purple Martin]

I've just been asked to do a post-implementation review of a site built by someone else. I opened it up and the first thing I noticed was... red text on a green background!

I guess the "designer" has never heard of red-green colour blindness. I can just imagine the reaction of all those people: "why is this page blank?" :o

[GarryBoyd]

Here in New Zealand National Pride dictates that web sites shall be BLACK, usually with silver or white text. There was a time it seemed like there was a law dictating this as so many sites looked this way. When the background was a tiled gif that didnt load, you got lots of blank pages.

[Dave2]

Whilst reading this topic I occasionally had to blink to get my eyes back to normal; too much white ;) - /me looks for a different colour scheme.

Whenever I do a page with a white background, I usually make it an off-colour white - e.g. at the moment I use #f5f5f5. One big problem with older/incorrectly configured monitors is refresh rates... at school, the monitors are locked into 60Hz; I have to set most things to an off-white colour to be able to even do my IT coursework :(. But this doesn't really have that much to do with the topic at hand. Umm... I hope you can make sense of this post :)

[gracedpoet]

I use a black background and vary the text from blues to greens to reds to gold. I get a lot of compliments from my visitors and no criticism. It is poetry, which is better, usually, read slowly. Maybe thats why it works.
Grace

[ggrot]

Too much brightness?
Linux command line: xgamma -gamma 0.8
Too easy.

[Visit Thailand]

gracedpoet I had a client who also got many compliments about his website, but as I said to him if the site had been designed better he would get a lot more.

Personally a site with a black background and blue or green text would not be able to keep me for long, but that is just personal taste.

[Ankheg]

Hi-

Been reading this site for a while, but not yet posted... I have had serious eyestrain problems from reading black-on-white webpages for too long, so when I put up my first website about a year ago, I looked for alternatives. The one I personally found most pleasing was white-on-black, well, actually, um, silver text on black. On most monitors it's very-light-grey on black. I find it very easy on the eyes; some have complained they don't like it, but more have mentioned they like it. But, then, I'm not a big ecommerce player; just a small niche webhosting, etc service. The "industry standard" in my small market leans towards the artsy and funky.

I guess I have the opposite reaction to most people here; when I see a site with black-on-white pages, I tend to think "amateur", and not the other way around. It just seems to me there are too many sites on those annoying banner-laden free hosts full of black text on white backgrounds, but I may be letting my emotion at the (lack of) quality of the pages, and the presence of all the ads, get the best of me.

For what it's worth, one of the sites I run uses black text on #008000 (light green); But the whole site is done in this sort of theme, including logos, etc, so it works, I think.

My 0.02 worth. :)

[chiyo]

Ankheg,,

Welcome on coming out of the closet! Your post reminded me that sites are all meant to acheive different things, have diff strategies, and accordingly diff styles and layout.

My feeling is sites that have a strong call to action - get people in, and get people out quickly to either make an enquiry, subscribe to a newsletter or make an order - color strain is not a big issue!

My feeling is that the web is not, in general meant to be "read" like a book or magazine - articles are generally shorter and "snippeting" is a great strategy. We do have a lot of cntent on our sites, but we expect, and make it easy, for people to donwload longer articles or pages or pdf files or whatever for printing out and later reading.

When i think about it, most of our content is meant for either a quick scan or printing out, not reading on screen. In that case we focus more on a layout and style that communicates credibility and less on worrying about prolonged browsing.

[ijan]

This article explains the reason behind the increasing use of gray text, and it also tells why white background is not the best choice on the web: http://www.wowwebdesigns.com/power_guides/ever_heard_of_contrast/

[limbo]

One thing to add

Monitors add light to the screen. This in effect shines light right into your eyes. Printed text removes light from the reflective nature of white paper. So comparing reading text from a screen to print on paper does't neccessarilly make a good arguement. They are very different mediums and should be treated that way, IMHO.

Is this not one area where is really is up to the user to define there monitor setting to 'warm' the page or reduce contrast. We have all tried to read a book on the beach without shades and that is nigh on impossible(when the sun is shining) So go buy sun glasses or find a nice shaded spot ;)

[tedster]

I'm on a crusade now. I've changed every program that lets me customize text and background colors to something with less contrast - and the results are a major plus for my comfort.

I doubt that I'll be designing websites in pure white and black from now on. Of course, that means some real attentiveness to graphic page elements. Retro-fitting a site is not as easy as a few tweaks in the CSS file!

[chiyo]

Same as Tedster. Great thread. Im already changing our pure white backgrounds to significantly off-white so its less glarey, but leaving the black pure black. Luckily thats very easy with CSS or a multi search and replace..

Thanks for starting this thread..

[GarryBoyd]

As I understand it, the browser safe palette contains 216 colours. There seems to be very few choices in the light gray area. Some of the colours suggested here are definitely not on that 216 colour palette and may render quite differently on another monitor.

Is the 216 colour limit for the web redundant now, or could this be of concern when tweaking text and background colours?

[Craig_F]

most people here will probably tell you to go by what your logs tell you. the vast majority of my visitors are at 16m colors, so I don't worry too much about colors anymore.

[tedster]

Is the 216 colour limit for the web redundant now, or could this be of concern when tweaking text and background colours?

When someone visits with only 256 colors, what they see will depend on the nearest "web safe" color. If we stay with various shades of gray, then the under-equipped visitor will either shift to pure black on pure white (#000000 on #ffffff) or a very usable #333333 on #cccccc.

A parallel shift will occur if you have subtle color hues. You might want to check the way colors will shift before you commit to developing that way.

Avoiding pure black and white is the kind of touch in website development that few users would consiously notice. That's all the better - they simply feel more comfortable when your pages are on their monitor and that's a good reaction.

[GarryBoyd]

I understand that the web safe palette can be ignored reasonably safely for images, I'm not so sure about solid colours tho. The 216 palette is safe across the web on all hardware/software combos. For example #f5f5f5 suggested earlier is a nice subtle background. If it degrades to a web safe grey however, there is a distinct lack of contrast. Older monitors, poorly set up monitors, old eyes are all likely to have a problem reading light black on light grey. I tend to use solid backgrounds with text blocks of black on white.

[lgn]

I use to fly RC planes before I started my web business. Anyways, our trainer planes, always had a combination on dark blue on one side and light yellow on the other, to aid in orientation. We were always told that the combination of dark blue on light yellow provided the best contrast, not black on white.

Im not sure if this contrast had something to do with a grey or blue sky, or applies to contrast settings in general.

[TheDoctor]

There's a diference between what people have been doing with ink on paper/parchment/papyrus for the last 3000 years and displaying information on a monitor. The ink marks on paper etc are visible by means of reflected light, whereas a monitor is a light source.

Makes a lot of difference, particularly since the human eye has not evolved to be much good at looking straight into a light source - which is what we ask our users to do,

John

[ricfink]

TheDoctor has a good point.
White from a computer screen is not the white you get from a piece of paper.
It's a luminescent bright white.
A soft grey onscreen is much closer to white paper.

(And how about "soft white" light bulbs? Same principal.)

Also, there is a visual condition called astygmatism which is very common, and which I have, that makes me sensitive to glare. I'm a developer and after three or four hours at the screen (with plenty of breaks, too) my eyes literally dance in my head. Psychedelic.

Hey, we got "High Contrast" for folks who are color-blind.
We got "Bigger Type" and all kinds of Zoom features for the near-sighted.
How about "Low Glare" for people like me?