Is your (website’s) underwear showing?

It’s astounding how many web designers forget to specify a background color on their site. They’ll spend months iterating wireframes and design comps; write CSS hacks for browsers predating this century; test their work on everything from Blackberries to old Macs running System 7; and of course they’ll validate their markup and style sheets. But after all that, they’ll forget to apply a background color to their site, and they won’t think to check for it.

To see it in action, set your browser’s default background color to magenta, or something equally piquant. Then visit websites. You may be surprised.

If you find a site with its underwear showing, please share it in the new Underwear showing (web design) group on Flickr.

[tags]design, webdesign, underwear, showing, color, backgroundcolor, interface, interfacedesign, errors[/tags]

97 thoughts on “Is your (website’s) underwear showing?

  1. Some tricks never get old :)

    Although my collegues tend to eye me suspiciously when I open a blank tab and my fluffy pink custom background shows..

  2. I assume you don’t think there’s anything wrong with a website that leaves all colors unspecified and relies on the user to set their defaults to something that pleases them.

    Right?

  3. I can’t understand what difference this makes to anyone. Except for you, who browses the web with the the background colour set to magenta? And to what end?

    As you’ve pointed out, most developers haven’t bothered. You’ve incorrectly identified this as some sort of major design problem, when in fact the ubiquity highlights the absolute lack of a problem.

  4. “I can’t understand what difference this makes to anyone. Except for you, who browses the web with the the font size set to largest? And to what end?

    As you’ve pointed out, most users haven’t bothered. You’ve incorrectly identified this as some sort of major design problem, when in fact the ubiquity highlights the absolute lack of a problem.”

  5. I would have to agree with the other commenters. This is off the cliff. If you want to change the default color of your browser then it should do exactly what you are talking about. Like changing the font size etc.

    I didn’t even know this feature existed…who came up with changing the default color of the background in your browser? One of those “more features doesn’t make better software” type deals.

  6. “Who came up with changing the default color of the background in your browser?”

    Browsers already had this feature before HTML (let alone CSS, which didn’t exist) could set the background color.

    It doesn’t make much sense that a user would really like to set the browser to a different set of colors than all their other applications; you’d think this would have always been a window manager setting. But remember early graphical browsers were developed to run on X, which (especially then) didn’t do much in terms of enforcing a common color theme across applications.

  7. Also astounding -and simple to remedy- is the lack of tooltips on icons that don’t have their own labels. Simply amazing how many sites leave one guessing…

  8. For all of you that think he’s lost his marbles…

    This is an old developer trick. I haven’t had my browser background set to white since sometime during the year 2000. Why? Because it reminds me to set my background colors.

    However, as a developer who has changed his bg color, you notice ALL the sites that haven’t bothered to set a background color of their own.

    The problem is not that the sites haven’t set one. Or that users can now set their own. The problem likely comes from the fact that they HAVE set a font color.

    The rule is clear. If you set a font color for the text, make sure you set a background color as well. Never shall their be one without the other.

    Jeffrey, you’re spot on with this one, and I appreciate someone with good visibility bringing it to people’s attentions.

  9. @James – clearly you’ve never used a system theme to change your entire windows/osx/*nix color scheme. There are entire communities built around customizing their OS UI and entire programs built to do the same. For any user who has a system background color other than white, they will experience the ‘underwear’ scenario. The simple case of letting all of your colors be system/browser specified is okay because all of these OS themes will set a text/background color pair that works. However, in cases where the website specifies a text color but not a background color, you can easily end up in situations with black on black text. It takes 17 characters to completely avoid this issue so why wouldn’t you?

  10. I believe on windows machines if you customize the backgrounds of your windows or theme the OS at all it will effect the background color of IE also.

    So if you do spend all that time making the website pixel perfect you should add a background color to your body tag otherwise the site will end up not-so-perfect.

  11. I’m surprised to see so many “so what?” responses. As developers, we bend over backwards to make sure viewers see exactly what we want them to see. You know you’ve spent hours making sure everything lined up correctly, down to the last pixel. But forgetting to have a background color set and letting your work be shown in magenta or cyan is perfectly fine?

    I don’t think this topic falls under “things that the viewer should have control over” We aren’t talking about someone needed a certain font size because of poor eye sight. We are talking about how your website will look to the masses that just happen to not have a white background by default.

  12. Just a note on changing your default color, too: you need to make sure that the option to “Allow pages to choose their own colors, instead of my selections above” in Firefox, otherwise, your defaults will override any colors on the site.

  13. I’d have to admit this has never been a problem on most of the websites I’ve worked on.

    I’ve always found it something good to do is to set the page background colour to something just off white, if the background is meant to be white. I do this mainly because I’ve found white to be overly bright on LCD screens, but fine on CRT’s. I think I read about this first in 456 Berea Street, but I can’t remember.

  14. Being a Linux user, the default background of my web browsers is inherited from my desktop interface settings. It becomes very problematic when the background color for an input box is not specified, but the text color is set to black, where the developer assumes the default color will always be light. If I have my desktop environment set to dark background with light text, I frequently get forms with black text in black fields.

  15. Des, you can’t really get reliable stats on user-set preferences like this. But since the fix is so simple, it makes more sense to make sure that someone can’t be affected by it rather than gathering stats on how many people are affected. :)

  16. I’m surprised to see so many “so what?” responses.

    Sadly, I’m not. Web design education is poor to nonexistent, and general discourse has been coarsening for at least a decade.

  17. Default background color to all browsers is white.
    There may be a reason, if changed. So why not let this extra flexibility, when it’s needed(like different font sizes)? I have nothing against that.

    I truly hope that we aren’t looking in other peoples underwear, only to show that we can write an additional CSS piece or to say that our sites are 100% consistent, whereas our competitors achieve only 99%. Hopefully there is something more to it.

  18. @Jonathon – I don’t think it is a problem. It is symptomatic of not understanding what a baseline is to web design.

    I wonder about this too. I live in Grand rapids Mi. and what passes for design is ~5 years behind. Makes me sad.

    Setting the canvas defaults is one of the things I do to archive a consistent outcome. Should not rely on browsers to set the quality of your work.

  19. I truly hope that we aren’t looking in other peoples underwear, only to show that we can write an additional CSS piece or to say that our sites are 100% consistent, whereas our competitors achieve only 99%.

    The W3C says, if you declare a foreground color, you should also declare a background color. This has been in CSS since CSS1.

    Anyone who validates their CSS and forgets to declare a background color will receive a warning from the W3C, reminding them that it is a good idea to set a background color.

    Neglecting to do this is like forgetting to zip your fly before leaving home. Hopefully, nothing will go wrong, but what if something does? If you wouldn’t leave home with your pants unzipped, you shouldn’t publish web content with the background color undeclared.

  20. My trackback doesn’t seem to be appearing here so I’ll link my response to this article here.

    I agree with you Jeffrey that if you’re making a site that needs to look consistent across browsers that you should set that up – what about people who require a high contrast setup however?

    I know the usual thing to do is to provide an alternative stylesheet but this could be easier for your readers who rely on the browser settings if your site’s background happens to be white and plain (and probably boring but we’ll call that minimalist for now).

  21. Ross, a user style sheet can take precedence over the designer’s layout, regardless of what colors and so on the designer used. (The only exception would be if the designer had foolishly marked all rules !IMPORTANT. Doing so could cause the designer’s rules to override those needed by the user.)

    As to how to set up a a style sheet that is optimized for high contrast, start by reviewing Joe Clark’s groundbreaking zoom layout work.

  22. Ah – due to some discussions I’ve been having recently (n the new php.net design) I was under the impression the reverse was true – thanks for clearing that up! I’ll look into zoom styling.

  23. Changing the text background colour can help many users, such as the dyslexic, read content more easily.
    I think you’ve set a shocking example, by asking people to break accessible behaviour. Oracle et al should be commended.
    You are a grey-on-grey-on-grey nitwit.

  24. Changing the text background colour can help many users, such as the dyslexic, read content more easily.

    Changing background when you can’t change foreground is not helpful. User style sheets and alternate layouts (such as zoom layouts) are the way to achieve what you’re talking about.

    I think you’ve set a shocking example, by asking people to break accessible behaviour.

    I’m sorry you know so little about accessibility. Fortunately, you can learn.

    For example, start here:

    http://www.alistapart.com/topics/userscience/accessibility/

  25. Nice post and excellent definition “The rule is clear. If you set a font color for the text, make sure you set a background color as well. Never shall their be one without the other”

  26. Just to join the ranks of the “What the…?” crowd, I am amazed that this topic has generated so much discussion. Mr. Zeldman succinctly outlined in both this article and the Flickr group description the simplicity of this phenomena. This topic is very much a “Design 101″ level discussion and as Jeffrey pointed out has been defined since CSS1. Setting a background colour is a simple, considerate, and accessible requirement for good design. The end.

    I’m not trying to quash open discussion. I’m just pointing out that as with most things it’s always beneficial to reinforce the basics.

  27. Curious to see how many sites I visit during the course of a day don’t set their bkgd color, I set my browser background to an acid green. (I used to do this a while back, as well as changing the font to something random.)

    Then I went about my work to update one of my client’s sites. Now, I’ve been a web site designer and developer since 1995 and setting the background color is that I find elemental in all my work. But, what do I find? My OWN client’s site is missing a background color designation. Lesson learned:

    We are all better when basics are revisited.

    Thanks Jeffrey

  28. I find this funny, so I’m not trying to rain on the parade, but this very website of yours counts on browser defaults. Change your default font-size to something actually normal, like 12px, and then view your page. I assume you’re setting the font-size to a percentage on the body and then using ems for size.

    Which is worse, unreadable font sizes or crazy background colors?

  29. The people saying here that this is nonsense have to consider the following:
    From a designers point of view, you can never know what background color the user will have. To make sure your content is shown as designed, you will need a backgroundcolor for at least your block-level elements. Otherwise there will always be a risk of having the same background- and font color, which obviously does NOT benefit useability.

  30. This is such an oldie! Those familiar with Netscape 4 under Linux will recall lots of websites forgetting to set bgcolor in their body ;) This old browser and OS combo used by default an un-site-ly *nix grey. I hope I’m not destined to become a dirty old underway snooper like Zeldman. ;)

  31. How enlightening, I never knew you could change the background colour by default and thank you once again Jeffrey for educating me.

    The conversation’s certainly interesting as well – a lot of conflicting opinions. Although several commenters are almost angry at you for bringing up what they feel is pointless and unnecessary – it all boils down to the fact that to get around it takes no effort at all, so why not?

    From now on I’ll be ensuring that I specify a body background colour where necessary.

    Thanks JZ!

  32. While others are asking ‘what difference does it make’, I have to agree that it IS a problem – not a big one, but it’s there – and it can be ugly. I have had my default background color set to a pale PINK for years. This is because I stare at a computer screen 10-12 hours a day, and staring at a white background on everything causes eye strain and even headaches. The pale pink BG saves me from all that. I cannot tell you how many site I visit where I see white “boxes”, or black if it’s a dark theme, surrounded by PINK – it looks pretty awful and it’s all because the designer didn’t define a background color. For the most part, it’s an oversight, people just don’t EXPECT that some of us would dare to change our default colors – well I do, and I always have !

    On the few occasions I’ve actually mentioned the faux pas to the designer/site owner, they were not happy that their design looked broken because of the lack of a BG color specification – and they fix it very quickly in most cases.

    I run a team of 3 web designers, and one of the ‘rules’ for proper CSS is to ALWAYS define a background color ! You won’t find any of our 200+ web sites with their underwear showing !

    The lesson here.. don’t ASSUME that everyone is going to leave their default system colors as they are – some of us like to change things up. ;)

  33. Is it possible to do a “quick fix” of this by using the * { margin:0; padding:0; background:transparent; } at the top of the css file?

    I would have expected that if we set a background in the body element, that background color would carry through as the default through all the other elements. This is an issue I’ve been trying to rectify since I started validating my css… it’s not easy to remember!

  34. Is it possible to do a “quick fix” of this by using the * { margin:0; padding:0; background:transparent; } at the top of the css file?

    There are problems with using the star selector, primarily with form elements. Eric Meyer has written and spoken about this. (His response to comments on Reset Reloaded will probably lead you to a concise explanation of the problem.)

    Selector aside, background: transparent would work for all the child elements (and probably isn’t even necessary). The problem is the topmost parent element. If it has a foreground color, it also needs a background color.

  35. I see http://www.booksamillion.com/ is showing it’s bloomers…

    The client has been informed. As can happen in any project, a few changes were made to the site after Happy Cog delivered it to the client. In the midst of these changes, someone seems to have edited the CSS rule on the body element, inadvertently removing the background color when they did so.

  36. I’m a complete newbie, but have always set a bg color without knowing exactly why. Now I know! I set my browser’s bg color to orange and was amazed to find how many website’s underwear was showing. Even Apple, Gmail, Ebay are flashing us. Their lack of specification is obviously an oversight as the sites look simply awful with an orange bg (granted, orange is an extreme choice, but some do go there). Shaun Inman’s site, on the other hand, seems designed specifically to let the user pick their own bg color, and works well, though I could see it being a real problem for the user that sets their bg to something that doesn’t allow for a legible contrast of the text. I find it amusing that some people here responded with such vitriol. I will always set a bg color, otherwise what’s the point of design?

  37. Just so I’m clear on this: the reason we have to set the background color is so that if the user has set a default background color, it won’t conflict with the foreground color that we did set.

    Thus, we only need to set a background color if we have set a foreground color?

    Furthermore, we have to set a background color if we have specified any colors on the page: text, links, images that depend on a contrast with the background, etc, right?

    And, it’s OK if we just want to leave it all up to the user, and not specify any colors?

  38. Also astounding is the number of sites that don’t clearly specify whether or not users should wear sunglasses, 3D glasses, or glasses with clear lenses/no lenses.

    See, my job (and hobby) is to develop sites that use the red-blue 3D technique, so I always wear red-blue 3D glasses while I work on my sites, and of course I leave them on while I view other sites. You would not believe the number of sites that aren’t designed for 3D glasses and yet don’t explicitly warn users not to wear 3D glasses.

    To see this in effect, put on a pair of sunglasses, red-blue 3D glasses, or those weird clear 3D glasses. Then visit websites. You may be surprised.

  39. A colleague pointed this thread out to me as he knew it was up my alley.

    What I’d like to mention is that many posts here are discussing the absurdity of changing the background color in your web browser to experience the ‘underwear showing’ ( when a web developer has not defined the background color to be white); arguing “Why would a user change their default background color in their web browser to Magenta, etc?”

    But what is not mentioned is that if you have your Windows Display Properties settings to have a non-white application window (something many power users like myself have done – tweaked the color settings for Windows, using – Display Properties / Appearance / Advanced / – in this case “Item – Window” – where mine has been set as light yellow , as I could not stand the high-contrast white in application windows, file explorer, etc., under Windows).

    I’ve had my Window’s application window color set to be light yellow since 1996 – and it wasn’t until years later when I moved from being a mainframe programmer to a web developer and the web evolved – did I discover that setting my Window’s application window color to be non-white showed many sites “whose underwear is showing” – regardless of browser color setting!

    This is CSS 101 and Mr Zeldman has made good points in shedding light on it.

  40. i think this is a fascinating discussion. At first i thought ‘yeh, surely overriding an option in the browser reduces accessibility’… but then, unless you are building a white website or using a repeating image, you always specify background colours! In that case, whats the point of a change of default bg colour? But then i noticed in FFox that you can override site colours and that means it could make sense for accessibility.

    I’d have to side with Jeffrey here. Impaired visitors will have already overridden the specified colours perhaps, so we should always be specifying in that case.

    Thanks for the interesting note!!

  41. Back in the days before CSS, it was a common thing to set the backround and text colours with something like this on the BODY tag:

    [[body BGCOLOR=”#000000″ TEXT=”#FFFF00″ LINK=”#FFFF00″ VLINK=”#FFFF00″ ALINK=”#FFFF00″ BACKGROUND=”/background.gif” BGPROPERTIES=”FIXED”]]

    Everyone did this. With the move to CSS that method was deprecated, and many forgot to replicate the functionality in their CSS.

  42. I’m setting my default font-size to 12 pixels, because I think that’s a good size for me to read things online. Then, I’m going to highlight all the sites that set the default font size to a percentage on the body, and then use ems. Relying on my browser to have a default font-size of 16 pixels is ridiculous. I want my fonts at 12 – not 16.

    Should we set a background color, sure – do I set a background color, yes – should we make a big deal out of not setting background colors – probably not. Last time I checked (okay – I haven’t checked), but not defining a background color doesn’t make your CSS not validate.

  43. Isn’t there a valid argument on the flip-side of this picture?

    Background and foreground colors have an impact on readability. If your colors are difficult to read, why shouldn’t the user be able to change those colors to be able to read the all-important content on your site?

    What about the color-blind user? Maybe they set their browser to ensure greater contrast and now we have taken that away from them.

  44. @Rrrrob, try http://nytimes.com

    A great post I must say. Since I read it, and changed my default colours, I’ve been straining my eyes even more because of unspecified background or foreground colours.

  45. I agree with the others. Really, I think this is a non issue and I hate the suggestion that thos that agree are “uneducated”. We’re not uneducated we just think you’re making a fuss over nothing.

  46. By specifying the background colour when its not neccessary arent you successfully encouraging people to circumvent a useful accessibility feature…

  47. I’m also surprised by the number of people writing “effected” when they mean “affected”. I hope we don’t all write web copy!?!

Comments are closed.