bgcolor follies

Yahoo! in magenta. If you forget to set your site's background color, your visitors may do it for you.

A reminder for people who make websites: if you forget to set your site’s background color, your visitors may set it for you.

In three minutes, I found three sites that forgot this basic rule of web design. Set your browser’s background color to something heinous (I chose magenta) and click around the web. You may be surprised. Don’t forget to check your own site!

[tags]bgcolor, webdesign, color, yahoo!, segura-inc, 800flowers[/tags]

55 thoughts on “bgcolor follies”

  1. That is pretty amusing and a useful check to do. Normally the very first thing I do is set the colour and background colour of the body tag so It’s not an issue I often face, but everybody screws up sometimes.

  2. Calling this a ‘basic rule of web design’ seems a bit strong. ‘A good way to annoy users who want to customize the look of your site’ would be a better description.

    (But yes, I realize that if you are going to specify the colors of your fonts it is generally a good idea to also specify a background color on which they are readable.)

  3. But if you’re going to explicitly set bgcolor, you must set the foreground too! On one of my browsers I have my colours set to white on black, and sites that only set one and not the other become completely unreadable – Google is a prime offender on that score.

  4. I guess this is the case with every setting a user might do. Same goes for font-sizes, font-faces, link colours and all those things.
    It can screw up a website, or in this case give some people a good laugh.

  5. It seems to me that if someone set their browsers background color to something hideous like magenta then they actually LIKE magenta as a background color in which case, by NOT setting it, you’re enabling them to see something they like. Who cares if the end result is hideous to you as the site’s creator. If it’s what they want you’ve just made someone a little bit happier. The only thing you should worry abuot is making sure it’s readable under those circumstances, which is, admitedly, hard. But that’s a separate issue.

  6. I’ve been alerting non-big-commercial sites on this for some time. Usually webmasters appreciate it and add the missing line to their CSS.

    Others (e.g. google adwords site) end up with the usual “we are smart, you are using a non-supported browser“. So, my pale blue bgcolor makes the browser non-supported, and myself an idiot.

  7. This is something that I’ve always done. Whenever I install a browser on any computer, I always set the default background color to gray. This just shows me who’s a lazy designer. My old boss used to laugh at me about this, but now that you mentioned it, he’ll see it in a different perspective.

    It irks me to see gray backgrounds and white background images. Or worse-so, transparent GIFs with jagged white edges on gray.

    Don’t rely on browsers’ defaults. That includes background, text color/font and link color/decoration.

  8. This is a good reminder, though here is some additional food for thought: I can say with near certainty that in my entire group of friends, family, clients, and associates that none of them have ever, or will ever, set their own background color. I realize that the size of this group of people amounts to a rounding error in the online population, it is still worth a reminder to your gentle readers that there are things we do as good developers that are simply insignificant. That is not to say we shouldn’t do them, but that we should not overestimate their importance. You may argue that it may not be insignificant to the individual user who DOES have a need to set their own background color, but since I’ve never met one of these people I’m unable to say how significant it may be to them.

  9. Devil’s Advocate has a good point: the average user will never change their browser background and therefore never encounter the issue. However there is a much more more common use case: people who browse with images turned off, either to avoid distraction or to increase their surfing speed (mobile users, people paying by the minute for access, etc). Surf around with images turned off and you will find many sites unreadable because the designer used a contrasting background image but neglected to set a matching background color. One notable example is the PBS home page — turn off images and the navigation becomes invisible.

  10. masukomi said:

    It seems to me that if someone set their browsers background color to something hideous like magenta then they actually LIKE magenta as a background color in which case, by NOT setting it, you’re enabling them to see something they like. Who cares if the end result is hideous to you as the site’s creator.

    I set magenta as a background color in Firefox to test test sites I’m working on to be sure we remembered to set a background color.

    Setting a foreground and background color lets you achieve important objectives, including:

    1. Comply with WAI accessibility guidelines that require contrast between foreground and background.
    2. Present your brand in an appropriate and desirable light.

    @Marla: Good points.

    @ Vincent: Great set.

    Is there a Flickr group for pants-down backgrounds? If not, why not?

  11. I’ve been doing this since the background color served by default in browsers was medium gray. I always specified white (or whichever color I wanted) and never got out of the (good) habit of specifying it.

    I too set my browser’s default background color to catch when we’ve forgotten to set it. I set it to #eee so that it’s easy to make out the absence of a specified color, but so it’s not so hideous that it interferes with my browsing readability.

  12. It still amazes me that people don’t set a background colour. Not all browsers have white by default, and this oversight seems to do is indicate (at least to me) that the author just hasn’t bothered to do basic testing.

  13. About a quarter of all sites I see don’t have a background color set. I have my computer default color background set to grey because I don’t want to look at dazzling white all day. My browser uses this setting. Most people say thanks when I point the missing background out but many just don’t believe me or can’t be bothered to change it.

    I know many people are fond of light text on dark backgrounds so there may be many more people with non-white browsing backgrounds than some of you may imagine.

  14. I don’t see why you would want to replace the users preference with your own. The sites is there for the users, and disabling their capabilities doesn’t help anyone. Allowing them to customize certain aspects of your site is very simple skinning. Giving the user more control over the site is better accessibility, in my opinion.

    I feel that the only time you would want to change the default bg color is when there is non-default-color text displaying against the default bg.

  15. thanks for the tip. Suprised to see yahoo is not with the program. Thanks for the post, until now i did not know you could change your background colour.

  16. Giving the user more control over the site is better accessibility, in my opinion.

    Why not have the user agent handle that?

  17. My opinion is that not setting bgcolor is the correct way to go unless you need it enforced (in which case the better option is to remove that need). The user should control his or her experience to whatever degree is reasonably possible, and I’m frankly somewhat appalled that you think deciding that a background colour doesn’t absolutely (ignoring the fact that it can be overridden anyway) need to be enforced is a mistake.

  18. Like Peter, I keep my default background color non-white. It’s amazing the number of well know sites that look funny this way. This may be the correct way to go, but if you design a site with gradients fading to white, you might want to think about setting it.

  19. I don’t see why you would want to replace the users preference with your own. The sites is there for the users, and disabling their capabilities doesn’t help anyone. Allowing them to customize certain aspects of your site is very simple skinning. Giving the user more control over the site is better accessibility, in my opinion.

    I might agree with you if that’s what these sites were doing. But they’re not. Look at the Yahoo screen shot. Yahoo controls the text and link colors. Yahoo controls all the background colors in the content areas: white in some places, gradients in others. The user has no control at all in this scheme.

    Only the background color between and surrounding content elements is up to the user. That isn’t user choice. It’s a mistake. If you are going to put white backgrounds and gradient backgrounds behind the content, then you need to also control the background color of the surrounding, content-less areas.

    Talking about user choice is fine, but that’s NOT what these examples are about.

  20. Really… most user agent even let their user specify their own CSS… are you going to add an ‘!important’ statement to prevent them to do that?

    If users want to screw up your design, they will — meanwhile, the rest of us will avoid using a color we find heinous as our default.

  21. A related problem is sites that set text and link colors to black. Since I have link underlining turned off, I see no links.

  22. Haven’t you all got something better to do? Why set yourselves these absurd tests? Nobody is actually affected by not setting a bg color where a white background is intended except: 1) snide little designers who want to find out who is being “lazy”, and 2) Netscape 3 users.

    I don’t care for either.

  23. Hmmm, I am a complete noob, so let me ask a dumb question? How do I set the background color in my browser?

    My main browser is Apple Safari on Mac, but I also sometimes use OmniWeb, Camino, and (rarely) Firefox.

    Many thanks,

    JDM

  24. Sorry, but I just fail to see these as good examples. Sure, not setting a default bg, when it concerns accessibility is bad, but here?
    You say it yourself: Yahoo does set the background behind the content. (and the case is similar for the other sites mentioned as well) So this is only a “looks question”, and an unimportant one at that.

    Do I care, what the background looks like, while there’s no content directly over it? Not really. Both white and gray seem an acceptable default, so why bother? If the user changes the defaults, he/she has probably good reasons for that (are there good reasons for such a thing? :) ) so all the better …

  25. But, why have you choosen the disgusting bgcolor word? It grossed me out! It’s like a bad deja-vu, it should be forbidden! background-color please! :-)

  26. My opinion is that not setting bgcolor is the correct way to go unless you need it enforced

    If you have text over the background, then you need to specify both of their colours, to ensure that the text is not accidentally made unreadable.

    But it is not enforced, anyway. A user can set his browser’s style sheet to override your font and background colours.

    How do I set the background color in my browser?

    Safari → Preferences → Advanced → Style Sheet. I put the following in mine: html { background: #FFA500; }

  27. trivia: yahoo’s site has always been background-less. back in the ns navigator days it would show as light-medium gray, while explorer’s default was white which i secretly loathed because one might forget to set it. i didn’t mind for usability; the lack of focus on eye candy meant slightly more tolerable load times. back when i used yahoo.

  28. 3) People who use custom Windows themes that change their browser bg color.

    Yep, don’t care about them either. Anyone else found a grain of sand on the beach?

  29. OT: where did you once describe how you do the “water color” effect on your header fotos? I could swear in once found it here but can’t anymore.

  30. That’s long been one of my pet peeves. I have my browser background set to #ffffcc so I see lots of site that forget to specify. They assume white, but you know they say about assuming.

  31. I always set my brower background colour to a really bright, lurid orange. No-one in their right mind would use that! (a)

  32. Thank you, sir! I checked my sites and found one that I missed. It was the only one with a white background. It never actually crossed my mind that someone would change their background color.

    Thanks for the tip!

  33. I fundamentally disagree with the notion that allowing the user to alter one’s design makes a site “more accessible” as some respondents have stated. If I create a design, then that’s how I want it to look, period. That has nothing to do with marking up properly, using alts for images, specifying fonts with ems and percentages, sensible use of contrast etc (all those things which make a site truly accessible). The issue of background colour and text contrast is a basic aesthetic and practical design consideration, and, as a designer, when I set those I do it for a reason, and not to have a viewer come along and change it. “Who cares if the end result is hideous to you as the site’s creator?”… er… as the site’s creator I care. If I didn’t, I’d be in a different line of work.

  34. It’s a matter of “Damn, I forgot to set that bg property, but yea, I can blame it on accessibility.” The background color is not part of accessibility, it’s part of the design. If the user needs his favorite color as a background, he can always choose to ignore the background color that you specified in your page(most browsers have that particular option) and/or load his own stylesheet.
    Everybody can forget that at some point, we’re not robots. But don’t blame it on accessibility.

  35. I do NOT follow this practice.

    My brother has a minor vision disorder.
    It is not bad enough to require screen readers or other tech.
    All he needs to do is set the default background to some non-bright or comfortable color.

    The suggested practice disables his quick and easy fix.
    He is then required to find some other fix or leave the site.

    Is it just me? I think that if a visitor has reset the default background, didn’t he do it for a reason? I prefer to allow them the freedom.

  36. Is it just me? I think that if a visitor has reset the default background, didn’t he do it for a reason? I prefer to allow them the freedom.

    Your brother can override any background color setting by choosing “Always use my background color” in the Preferences section of any web browser. So your objection to setting a background color doesn’t stand up.

    Per WCAG 1.0 accessibility standards, you must ensure contrast between background and foreground. To do so, you must set a background and a foreground. There is no way to comply with this accessibility guideline if you don’t set both the background and the foreground.

    If you set a foreground color, you must set a background color. Period. End of story. Case closed.

  37. This issue is related to another one that many sites neglect (but zeldman.com does not neglect!): bacground/text colors for form elements. My linux desktop setup uses black background and white text. When I visit some sites, the forms are not usable at all because they style the text black, but leave the backgrounds to default. Thus I get black text on a black background in the form elements.

    When it comes to styling a web page, never assume anything on behalf of the client defaults.

  38. Just a thought:
    When setting up a new CSS, why not use this at the top of the file:
    html * {
    background-color: #ff00ff;
    color: #00ff00;
    }

    It might be a good reminder to set color values when you have something that ugly staring you in the face.

  39. I tested a few of my websites, was feeling smug because I’d set the background-color on all of them, then ouch! Found a couple I’d missed.

    Thanks Mr Zeldman, won’t do it again.

  40. I disagree. If a user wants to view whitespace on web sites with a fluorescent green background, then I want them to view my sites with a flourescent green background. … I see this issue as similar to using px vs em for fonts. If an IE user wants to view fonts at a certain size, I’m not going to try to make it more difficult for them to view fonts at the size of their choosing by using px.

  41. This also applies to block elements other than the body. Basically anytime you set a font color also set a bg color for that element. Many developers forget this when using bg images and forget to set a fallback color for when images are turned off. Which is truly an accessibility issue. If you are careful about that you shouldn’t need to set a bg color for the body. Then let the use decide what color they want the white space (if any) to be.

Comments are closed.