Figure-Ground Discrimination

Before you can understand figure-ground discrimination as a whole, you have to understand it separately. Figure refers to to the object we are seeing; ground is the context within which we see the figure. When the two of these concepts combine we are able to distinguish between the two, but also see them as a whole, which is what the Gestalt theory attempts to explain. As you can see in the examples below, the figures with more contrast are easier to distinguish than those with less contrast.

As you will see in the examples, contrast is extremely important in on-screen design. If an icon or symbol is not distinguished clearly the meaning could be lost and the user will not know the purpose or function of the icon. Dark and light colors make shapes stand out rather than similar colors, as you can see below. Look at your computer. Chances are that the figures are darker than the ground, i.e. the font on your toolbar is easily readable because it is darker than the light background of the toolbar.

This is image is a good example of proper figure-ground contrast because the black background offsets the white rectangle so it is easily distinguishable.

Gestalt_Bad Contrast.jpg

This image shows an example of inadequate figure-ground contrast because the colors do not differ very much from one another and are therefore hard to distinguish at a glance.

This is a poor example of the law of figure-ground discrimination. Believe it or not there is a rectangle in this image, but because the colors are so similar it is very hard to see.

Source: Kimball, M.A., & Hawkins, A.R. (2008). Document Design: A Guide for Technical Communicators. Boston, MA: Bedford/St. Martin’s .