100

Most Windows/Mac/Linux dialogs I've seen have grey backgrounds. About-dialogs, settings pages, wizards, confirmation and error dialogs etc.

Is there a reason from a usability perspective or is this just a remnant of old times? Readability of text and form controls on a grey background might not be optimal, especially when disabled text and input fields also turn grey.

I use modal dialogs regularly for progressive disclosure (details pages, adding, editing, etc.) when designing my Windows programs so there are a lot of form controls and text in these dialogs.

What if I just switched them all to white?

Example: one of the Internet Explorer settings pages - Original:

One of the Internet Explorer settings pages

Same dialog - edited to have a white background:

One of the Internet Explorer settings pages - edited

8
  • 32
    I guess that comes from the "white background = white paper to draw or write on, grey= "no access". So in forms, white is where you fill in. e.g. here: chip.de/ii/4/0/2/7/4/9/1/3/4216a354a4a7f60f.png --- I'm certain this cue is "older than computers", once upon time I earned some of my first money by typing paper forms into an almost-but-not-quite identical input mask on those new fangled computer things.
    – peterchen
    Jun 14, 2016 at 9:44
  • 15
    "Readibility of text and form controls on a grey background is not optimal in comparison to, say, a white background." [citation needed] Jun 14, 2016 at 11:43
  • 11
    Its not grey ;) It is default color of control face. It depends on system settings, and will be background of any window, unless it is changed.
    – PTwr
    Jun 14, 2016 at 11:52
  • @LightnessRacesinOrbit I rephrased my sentence
    – J_rgen
    Jun 14, 2016 at 11:54
  • 1
    Because A Whiter Shade of Pale and As-A-Shade-Of-Purple-Grey were already taken. Besides, there are fifty shades of grey to choose from.
    – user67695
    Jun 14, 2016 at 20:25

5 Answers 5

184

There is not really a "UX" reason for this—or if there is, it is a very limited one. The actual reason why dialog backgrounds are (by default) some shade of grey is because some designers thought that looked better.

In many early operating systems, dialog and window backgrounds were stark white. Obviously they were white on the original Mac OS, since it had only a one-bit black-and-white display. But that continued long after the Mac II added support for a color display:

System 7.5 (for Macintosh)

On Windows, the default settings had a white background for windows and dialog boxes all the way through Windows 3.1:

Windows 3.1

Starting with Mac OS 8 and Windows 95 (other operating systems followed suit, naturally, and the precedent had already been well-established by previous less-popular windowing systems such as NeXTSTEP, DESQview/X, and Amiga Workbench), it became all the rage among designers to give controls a 3D appearance. You can already see the beginnings of this in the screenshot above from Windows 3.1—the button controls already have a faux-3D look. To complete the 3D effect, dialog boxes were treated with a gray background.

Mac OS 8.1

The UI was designed as if it was affected by a global, directional light source, such that controls had shadowed and highlighted edges. Sections of windows and dialogs were beveled to make them look "inset" or "outset". Practically, the achievement of this effect required that the background on which the controls sat (the window or dialog box) have some color other than white. You can't have a highlight on top of a white background, since white is already the lightest possible color. They needed to turn down the contrast of the background so that the 3D effect would work.

Windows 95

Now, arguably, this is where the UX comes in. It was widely believed that making interfaces look 3D would make them more "user-friendly". Even at this early stage, when user-interface design was still in its infancy, you could see the emergence of the skeuomorphism principle—if we make objects on the screen look like their physical counterparts, then users will be more comfortable when interacting with them. For example, 3D buttons were more pliable—they look like buttons because they looked like they could actually be pressed (a concept known as "affordance", articulated most coherently by Donald Norman). And, wonder of wonders, when the user clicked on them, there was actually an animation effect that changed the color scheme to make the button appear to indent ("press") into the screen!

One can argue whether this 3D actually had the intended effect of making the interface easier to use and understand. Certainly it was widely accepted in the industry that it did, and nearly all computer operating systems followed suit. Everyone's controls looked slightly different—some option buttons were round, some were square, some were even diamond-shaped—but they all had the same 3D effect, which as a simple matter of practicality required an off-white background.

Certainly not everyone chose the same shade of gray. Some backgrounds were a lighter gray, others were a darker gray. But better yet, the user wasn't actually stuck with gray at all. Window managers provided a customization hook where advanced users (or those with visual disabilities) could reconfigure the appearance of their system, choosing different colors. Light and dark variations on the background were used to create the 3D effect.

A custom theme for Windows, courtesy of Erin Thomas (mochinet.com)

So arguably dialogs never really did have gray backgrounds—they just had non-white backgrounds. The reason people think of dialogs as having gray backgrounds is that the default themes shipped with the operating system usually used a light gray as the base color. Again, the designers did that for relatively practical reasons: gray is a color that virtually everyone can agree upon. Even if no one likes gray, no one hates it—something that you can't guarantee if you shipped out a window manager with rose-pink or teal-blue dialog boxes.

Now that the field of user-interface design has evolved, this is something that occasionally gets designers into trouble. They go through a lot of work creating an interface that they think is absolutely beautiful, with effective use of color. Then they release it on their unsuspecting users…who, it turns out, absolutely hate blue. They probably wouldn't hate it so much if they didn't have to stare at it all day, but your program forces them to do just that. All because some designer somewhere (or a team of designers) had the subjective opinion that a particular shade of blue really made the UI pop.

Although this will be controversial, I feel very strongly that fundamental color choices like this are not something that should be up to designers of individual applications. The user absolutely needs to possess the ability to customize the color scheme if she desires (personal preference) or needs to (accessibility reasons), and it is just far too unwieldy for each program to offer a unique interface for customizing its own appearance. A much better idea is for everyone to piggyback off of the operating system's built-in facility for doing this. And as an additional bonus, you get consistency. This is anathema to some designers, who absolutely cannot abide the idea of relinquishing control of every detail, but consistency is much more important to users. If your application looks and works like the other applications they use and have taken the time to learn, then it will take them substantially less time to get up-to-speed with using your application—even if there are some aspects of the design that you could argue are "sub-optimal." Consistency trumps innovation unless you have a darn good reason. Liking the color blue does not qualify.

Anyway, returning to our story: as fashions change and evolve, the old becomes new again. Windows Vista introduced the Aero theme, which lightened the shade of gray used by windows and dialog boxes—as you can see in the first screenshot in the question. Windows 8 took us full-circle, flattening (or nearly so) all of the controls and returning to stark-white dialogs that harken back to the days of Windows 3.1:

Windows 10

Worse, the (limited) customization ability that has long been a hallmark of a well-designed window manager is fading away. The user had been taken out of control—this time not by independent app vendors, but by the developer of the window manager. Someone who should know better. Why did Windows go back to a "flat" theme? Because everyone was doing it on the web, and a team of designers thought it looked "fresh" and "modern". Web applications, for their part, had started out doing this primarily because of technical limitations: because they ran in a browser rather than a full-fledged window on the desktop, they didn't have access to the window manager and they were left to implement their own windows and dialogs:

Some random web app

Obviously, these are inspired by the window manager's dialogs, but they are not the same. You can't be consistent with the operating system if you run on all operating systems. Where do you put the close button? On a Mac, everyone knows it goes on the top left. In Windows, it has been at the top right since Windows 95. On the web, it is anyone's guess where it might be. Same deal for the ordering and alignment of buttons. The consistency that was just beginning to make computers seem user-friendly began to evaporate because of these silly technical limitations, and then as web apps became increasingly popular, their design began to catch on as well, so that they looked more "modern" and "fresh" than did the "old" desktop applications. Time to fire up the old copy machines again!

Unfortunately, we still do not have consistency. Some dialogs in Windows 10 have stark white backgrounds, while others still use light gray. There is no obvious reason why. And the user cannot customize it.

There are undoubtedly usability arguments to be made on this topic. There is plenty of empirical research that suggests contrast is critical, but too much contrast can lead to fatigue. Black-on-white and white-on-black are both relatively poor choices. But there is no evidence that anyone has considered these arguments when designing dialog boxes.

13
  • 17
    YES! This excellently articulates why, as a developer, I still try to go for native UI toolkits (i.e. SWT) whenever I can (they can respect whatever color customizations the user made at the OS level), but I am very much in the minority.
    – J. Dimeo
    Jun 14, 2016 at 13:25
  • 10
    "Starting with Mac OS 8 and Windows 95 (other operating systems followed suit, naturally)..." -- Oh please. Don't make it sound as if Mac OS 8, and especially Windows 95, introduced anything novel. The 3D, low-contrast, battleship-grey look was already there in 1990's AmigaOS Workbench 2.x (it was 2D blue during 1.x), and I would not be at all surprised if there were earlier examples as well. Stop showcasing Win95 as "innovative". It was technological catch-up, is all it was.
    – DevSolar
    Jun 14, 2016 at 14:24
  • 36
    Bah! I knew someone would say that. The answer was long enough as it was. I didn't think it was really necessary to provide a complete chronological history, so I limited it to the major players. I did not mean to "showcase" Windows 95 as "innovative". Jun 14, 2016 at 14:39
  • 14
    'grey' is a correct spelling. As is 'colour'. Jun 14, 2016 at 21:00
  • 12
    Kudos for mentioning 'Because ... a team of designers thought it looked "fresh" and "modern"'. That's the real reason behind most UI changes.
    – JS.
    Jun 15, 2016 at 0:14
35

Too much white can cause eye strain, so tints of grey reduce this.

There is another ux.se topic which discusses white vs grey backgrounds:

Grey versus white background for ease of use and readability/legibility

1
  • This is true. I used to get sore eyes from the white background in Windows Explorer and on many web pages, and changed my computer's colour scheme to use a darker background by default. Jun 18, 2016 at 17:00
16

Because the difference between the font-color and the background-color can cause eye strain and is not optimal.

Having black or dark-grey text on a lighter grey background is the easiest for the human eye to read. See this link for a more detailed answer.

It tells you when to use brighter fonts with a dark background, and also when not to do this. Basically it depends on whether or not the person is scanning a text, like headers in images, or reading the entire text carefully, like you would in the kind of windows you showed.

5
  • I'd say users would rather scan text in forms instead of reading it. In the example, users might look for a certain switch or input field without carefully reading all the text.
    – J_rgen
    Jun 14, 2016 at 11:47
  • I guess you can look at it both ways, either you "scan" for something you need, or you "carefully read" the entire thing because you are not sure which setting you need to choose. Either way, if I'm correct you're initial question was why do big companies do this, the short answer is to improve readability.
    – MJB
    Jun 14, 2016 at 11:49
  • Could this be because I'm forced to turn up the brightness in order to make out the dark-grey-on-light-grey text that is used a little too often, thus making black-on-white a bit much?
    – RomanSt
    Jun 14, 2016 at 22:43
  • The linked article insists on assuming that reflected light is the most important effect, though, and with a significant proportion of screens being matte (and thus minimising glare) that simply isn't the case. Where the light emitted from the display dominates, light-on-dark is decidedly easier on the eye.
    – Darael
    Jun 17, 2016 at 1:46
  • I agree that link makes some inaccurate statements. But Chris B's comment below is pretty good. It starts "The original post is more or less correct but for the wrong reasons." Suitably enough, the comments on that page are grey-on-grey, easier to read than the article itself! :) Jun 19, 2016 at 16:46
1

This behaviour does two main jobs: first, it draws attention to your popup / dialog box and second, let's user know that the page behind it (for browsers) it's inactive in this state.

And those shadows or overlays are making a pretty good job.

Also the colour doesn't matter, you could use white, red, blue etc. as long the UI permits.

8
  • 2
    The color actually matters a lot for readability! You wouldn't want to make a background red and the text on top of that white for example..
    – MJB
    Jun 14, 2016 at 11:02
  • Of course it matters and as long as UI permits you can use also other colours. It isn't a must to use black or white. Jun 14, 2016 at 11:05
  • 2
    By "UI permits" you mean thats it's technically possible?
    – J_rgen
    Jun 14, 2016 at 11:20
  • What do you mean by "as long as UI permits"? Do you mean the UI makes it possible to use what ever color you like?
    – MJB
    Jun 14, 2016 at 11:51
  • 2
    Toolkit limitations don't matter here. If I asked whether it was possible to make text a certain color with my toolkit, I would have asked in the appropriate technical SE. The question here is: what's the optimal solution from a user perspective?
    – J_rgen
    Jun 14, 2016 at 12:03
1

One thing not mentioned so far is that any non-white background color makes it very easy to highlight textboxes and some other interactive UI elements (checkboxes, comboboxes, dropboxes, etc), by using white.

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