by Dixie Lang
Recently I clicked a link to read an article on marketing. The destination webpage had gray text on a gray background:
It was 7pm at night, and I was sitting at a bright 22-inch LCD computer monitor in a dim basement. The text vibrated in front of my eyes, and after a long day”s work, I felt the beginnings of a headache. I gave up and closed the browser. The problem: too little contrast between the text and background colors.
What Is Contrast?
Contrast is the degree of difference between the lightest and darkest parts of a picture.1
Think of Contrast Like a Dimmer Switch
Picture a dimmer switch to control a lamp, or a chandelier. You turn the dial to increase the light, so you can see what’s in the room.
With a webpage, you increase the contrast by making the background lighter and the text darker so you can see the text more clearly. This helps compensate for lighting conditions around the display device (e.g. low light, glare).
Why Contrast Has Become More Important
Have you ever sat next to a window and had to reposition your display device because of glare? The glare reduced the contrast, so you tried to push the device to a shady spot to bring back the contrast.
When display devices went mobile, the variety of lighting conditions skyrocketed. Try to picture these examples:
- Customer #1 with a smart phone, sitting in a dimly-lit restaurant browsing your website.
- Customer #2 with a laptop, sitting in a coffee shop next to a window, squinting through the glare at your homepage.
- Customer #3 with a tablet pc sitting in the back of a taxi, with the light changing as the taxi moves under highway overpasses, trying to view the map on your Contact page.
Will your customer be able to read your website under all three of these lighting conditions?
Eyestrain
Many people spend 8+ hours a day in front of a computer screen at work. They return home with tired eyes and try to view your website. High contrast webpages cause less strain to tired eyes.
How to Increase Contrast on Your Webpages
To increase contrast on your webpages, use black text on a white background. If you want to use color, use a light background and a dark text color.
Also beware of putting a textured background behind text, particularly small text. Here is another example from the same website as the gray-on-gray example:
If you look closely you can see diagonal stripes, alternating in two shades of dark gray.
Another way to increase contrast between text and background is to add a drop shadow behind the text. That's why the Dalton Unlimited text pops in the header of this newsletter. The drawback - you have to turn the text into an image, which requires image editing software and a little practice. This trick works best for logos and headers.
