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...
Today marks the 10th day since the new redesigned HP community platform was launched. Who's counting right?
Let me introduce myself, I am the online customer experience lead for communities and social media at HP.com. In layman's terms, that means I really care about your experience when you visit our online communities.
One thing that has been on my mind A LOT lately is our new light text on dark background color-scheme for blogs. Blogs are a unique situation because they tend to be quite text heavy. I like to think of them more like online periodicals. That being said, we have a unique set of challenges when it comes to user experience.
For example, do our users have to squint to see the words... do the letters start dancing around on the page after about 10 minutes of staring at the screen? These questions sound simple enough, but they actually are not that easy to answer. Let's reminisce for a moment.
Looking back
According to some sources, the world's first printed newspaper was published by the Chinese in 700 A.D. using hand carved wooden blocks. About 700 hundred years later, the world's first modern printing press (the moveable-type) was invented by a German man in 1450. It wasn't until 1701 that America's first newspaper was published in Boston. It was referred to as a "half-sheet" and was printed on both sides of the page, similar to a news-letter.
As you would expect, throughout history, man has been publishing newspapers, articles, books, papers, etc. on white (or some form of white) surfaces with dark ink. All-in-all, that practice has not changed for over 1,300 years. Just scanning the best-seller book shelves at the local bookstore proves this quite nicely. I would say that's a pretty long time to practice something so consistently. There must be a very good reason.
Let's think about that question: Why have we been printing publications on light surfaces with dark ink for so long? One possible answer could be because it's the most practical and cost effective method (my second-grader could have answered that question). Or could it be that we have just gotten used to doing it for so long, and hey..why fix it if it aint broke? What about technical limitations in the printing process? Could it be that technical limitations over a thousand years ago set the trends that we continue following even today?
Take a step back and think about it for a moment: What if we removed all technical limitations, all historical practices, and all expectations. As of now, the sky's the limit. Don't worry about whether printing on black paper will rub off on your fingers. Forget the limitations the physical world places on us. Now... ask the question: What text color scheme presents the best user experience for readers? Before we can answer that question, we need to explore some of the facts.
My future blog posts in this series will start peeling away the layers to get closer to an answer to this critical question....stay tuned.
