Tweet this!

My previous blog post was the first in a series of posts intended to explore what is (in my opinion) one of the greatest usability challenges of text-rich web sites: text color scheme. In my last post, I briefly discussed the history of printing with dark ink on light surfaces, and our tendency to continue trends that were started thousands of years ago. As you read this series, imagine a world where historical trends and physical limitations on printing do not exist. Now, ask the question: What text color scheme presents the best user experience for readers? Let's continue our search for an answer by discussing color and contrast.

Before we can understand the dynamics of black and white, we need to know a little about color. Having an artistic background, I frequently like to pull out my trusty ol’ color wheel to help find balance and harmony in many aspects of life. The color wheel is a versatile tool which is useful for a variety of activities ranging from planning an abstract acrylic painting to designing a web site.

This may be a flashback to elementary school art class, but let's begin by dusting off our basic understanding of color. Color is light and alternatively, light is made up of many colors. The color wheel is comprised of 12 segments containing primary, secondary, and tertiary colors (hues). There are three primary hues on the color wheel: red, yellow, and blue. In theory, all hues (colors) can be derived from a combination of these three primary colors. Note, I said "in theory", as those from the printing world know, this is not necessarily the case.  However, for purposes of this discussion,  I think we are ok with that assumption for now.

The color wheel represents colors in their fullest saturation. Saturation is the degree of purity in a hue (color). Purity refers to the amount of white, gray or black added to a color. A color in its purist state (fullest saturation) has no white, gray, or black added. Colors that sit diametrically opposite each other on the color wheel are called compliments. For example, the compliment of red is green, and the compliment of yellow is blue.

The use of complimentary colors has an impact on how our eyes perceive hues and contrast. Color and value contrast allows us to distinguish between objects in our daily lives. As such, the use of contrast is a key coping strategy for individuals with visual impairments. There are two types of contrast worth noting in this discussion: luminescence and simultaneous contrast.

Luminescence Contrast

According to the NASA Ames Research Center, the most important aspect of color choice in graphics is luminescence contrast. Luminescence contrast refers to the difference in luminosity (or lightness) of an object as compared to the background. When determining the ideal colors for web applications, we are concerned with the luminescence of text, not in its absolute state, but relative to the background. There are several statistics which attempt to explain the concept of human visual reaction to various levels of contrast. If so inclined, you may read more about luminescence contrast and the application of these statistics at NASA's Applied Color Science site. For the purposes of this blog, I would like to point out just a couple of important aspects of luminescence contrast.

Take a look at the figure to the right. Notice how the text becomes virtually unreadable when the luminescence difference between the background and the text is zero. For example, the text on the top right of this image has a luminescence of zero as does the background making it difficult to read. The same is true for the text in the bottom left corner of this image. Both the text and background are 100% luminescent... again making it difficult to read.

What does this tell us? It tells us that text becomes more legible and prominent when the difference in it's luminescence is greatest from that of the background.  Now at this point, you might be thinking to yourself, "Gee, we knew that...”.  And… yes, perhaps we did already know that.  However, in order to find the right answer we need to understand the science behind the question. Patience grasshopper, the answer will be coming soon. For now, I would like to discuss another important concept: simultaneous contrast.

Simultaneous Contrast

In 1893 a Physicist by the name of Michel Eugene Chervruel published a theory of color based on contrast. This led to a concept known as "simultaneous contrast" which addressed the natural phenomenon whereby two colors affected each other when placed side by side. This concept further went on to state that this effect was maximized when the neighboring colors were complimentary. To demonstrate the concept of simultaneous contrast, I created the illustration on the right. The two gray circles are identical in color. Notice how the gray circle on the left looks lighter than the circle on the right. In this example, our mind is tricked into thinking both circles are different shades of gray.

The concept of simultaneous contrast is an automatic visual response which is important in our daily lives as we rarely see colors in isolation. Color perception is relative and not absolute. In the image to the left, the green in both circles is identical. Notice how much cooler the green circle applied on the blue background looks as opposed to the one applied on the yellow.

These two concepts of contrast: luminescence and simultaneous, are important as we explore how we visually respond to text and graphics bringing us closer to our answer. My next blog post will discuss the concept of chromaticity. Stay tuned...

Tweet this!