A List Apart

Menu
Issue № 303

Contrast is King

by Published in Graphic Design, Accessibility · 33 Comments

Remember thrusting your hand into a big pail of mixed-up, broken crayons (or gently reaching for your box of perfectly ordered, mint-condition crayons), then leafing through your construction paper to find the perfect hue to go with your chosen sticks of pigmented wax? Or, did you hunt for the perfect piece of construction paper first, then search for the ideal crayons to go with the paper? No matter how tidy you kept your supplies or in what order you chose them, even at a young age we searched for correct color combinations. “Correct” was something different to each of us, but it often meant finding the right contrast between the background (construction paper) and the foreground (crayons) so our work would stand out among our classmates’ masterpieces.

Article Continues Below

From a very young age we understand that color affects our lives. However, as children we don’t know that people experience color in different ways. As children, we might not understand the term “colorblind” and even for an adult it’s hard to comprehend that color still affects people who are 100% colorblind—those who can only see in shades of gray. People who are colorblind are affected differently than people who can experience the full-color spectrum.

Contrast—the secret sauce

Contrast is the perceived difference in colors that are in close proximity to each other. Using contrast effectively not only differentiates your design from others, it’s the essential ingredient that makes content accessible to every viewer. People who are fully colorblind, those with specific types of colorblindness, and people with low-vision need to access content on the web. As designers, we must ensure that every viewer is able to perceive content on the sites we create. What’s more, we don’t have to limit ourselves to the high contrast combination of black and white. We can embrace our big pail of colors and create websites that unabashedly employ color with appropriate contrast.

Black and white

Today, designers are more aware of color choice ramifications. Many businesses, organizations, and institutions follow rules of accessibility, requiring designers to make color decisions based on contrast. This has created a greater need and desire to test for color contrast. A variety of tools and resources help meet this need, and a great way to determine the best fit for your workflow is to take some time to experience the tools for yourself.

Every designer has a different workflow, but research is often one of the first stages of the design process. One way to guarantee that design effectively uses contrast is to evaluate your layout in grayscale. To evaluate a live website’s contrast, you can use a tool such as graybit.com that converts existing websites to grayscale. Use graybit.com to research some of your favorite websites and test out your sites, as well. Ask yourself the following questions: Can you read the text? Do the visual elements retain their hierarchy? Take note of what works well when you view the websites in color and what stops working well when you view these sites in grayscale.

InterACT website in full color

Fig 1. InterACT website in full-color.

Evaluating InterACT website in grayscale.

Fig 2. The InterACT website in grayscale.

The images above show the full-color InterACT website and the grayscale rendition created by graybit.com. The content is still readable even in grayscale. This site was designed first in grayscale and then translated into color. If you can make a solid design in black, white, and shades of gray, it will often allow you to translate your design to almost any color combination—as long as that color combination maintains the same level of contrast between the visual elements. Create your sketches and roughs in black and white and then create comps in grayscale. This workflow not only allows your mind to stay focused on the hierarchy of elements on the page, preventing you from getting hung up on color choices, it also helps you to create a design that uses proper contrast.

To evaluate a website’s contrast while it’s still in the design stage, use an image manipulation tool, such as Photoshop, and view the design in grayscale versus RGB. If you would like to view the design you’re working on and even see your entire desktop including all of your applications in grayscale you can use Nocturne, which is an application that allows viewers to have additional control over their screens for viewing in low light situations. Use Nocturne to get a quick sense of how the contrast of your design is developing. Compare this image of my desktop that includes a photo that has strong golds, reds, and blues and the standard color swatch palette from Photoshop versus the image as seen in grayscale using Nocturne.

Full-color view of the desktop.

Fig 3. Full-color view of desktop.

Viewing the desktop in grayscale using Nocturne.

Fig 4. Viewing desktop in grayscale using Nocturne.

For extra credit, try designing using color while viewing what you design in grayscale. When you’re finished, turn off Nocturne and examine what you created. Note the color combinations that work well. Why do they work? I venture to guess that good contrast is the answer.

Passed with flying colors

Once you’ve tried designing in grayscale and are ready to move onto the color stage, there are many tools that can help you choose a proper color palette. Color Scheme Designer is one of my favorites. This tool provides a lot of control and options to help you choose a color palette without making the process overwhelming. It can also simulate how people with various types of colorblindness will interpret your color scheme. You can export palettes in a number of different formats; this makes it an easy and efficient tool to add to your workflow. If you are not colorblind, these simulations can educate you on how a person who has a specific kind of colorblindness interprets color. The following images show how Color Scheme Designer simulates the many ways people see color including: normal vision; Deuteranopia (green-blind); Deuteranomaly (green weak); and full colorblindness.

Color Scheme Designer simulating normal vision.

Fig 5. Color Scheme Designer simulating normal vision.

Color Scheme Designer simulating Deuteranopia.

Fig 6. Color Scheme Designer simulating Deuteranopia.

Color Scheme Designer simulating Deuteranomaly.

Fig 7. Color Scheme Designer simulating Deuteranomaly.

Color Scheme Designer simulating full colorblindness.

Fig 8. Color Scheme Designer simulating full colorblindness.

Visit colblindor.com to learn more about specific types of colorblindness. Coblis”“Color Blindness Simulator can also help you to get a better sense of how some viewers might see your work. This tool allows you to upload an image and view it as if you had different types of colorblindness. For example, you can use this tool to compare how people with normal color vision, Protanopia (red-blind), Tritanopia (blue-blind), and Blue Cone Monochromacy (almost completely color blind) would see an image of colored pencils. You’ll begin to understand how each person experiences color differently and why contrast becomes an important ingredient in creating readable design.

Normal color vision.

Fig 9. Normal color vision.

Protanopia (red-blind).

Fig 10. Protanopia (red-blind).

Tritanopia (blue-blind).

Fig 11. Tritanopia (blue-blind).

Blue Cone Monochromacy (almost completely colorblind).

Fig 12. Blue Cone Monochromacy (almost completely colorblind).

Shades of gray

Websites that use contrast help every viewer to comprehend content more proficiently. Checkmycolors.com is an easy-to-use contrast-analysis tool. Just type a URL into the field, click “Check” and checkmycolors.com provides an extremely thorough analysis of the website’s various color combinations. It checks for contrast ratio, brightness difference, and color difference. It creates a chart that shows the website’s foreground and background color values and samples of how the foreground and background appear on the site. A word of caution—most websites have many “failures.”

checkmycolors.com failures.

Fig 13. Failing the checkmycolors.com test.

The only site I tested that did not have any “failures” was checkmycolours.com.

checkmycolors.com passing.

Fig 14. Passing the checkmycolors.com test.

Check your sites when you’re ready to see a whole bunch of red/X boxes and the word “failures.”  If your site passes, congratulations—you just might be a color contrast expert.

Even though it can be a little disheartening to see how many color combinations create poor color contrast, we can use these tools to gain insight on where we need to make revisions. These tools can help us to make educated decisions about where we need to make contrast concessions for the sake of design. If a design element has no bearing on the readability of the main content does creating high color contrast matter? Maybe not. You might reason that the most important aspect of many websites is the content, and as long as the design does not get in the way of the content then maybe all viewers do not need to see every aspect of the design.

Link color.

Fig 15. Link color at InterACT.

Hover state of link.

Fig 16. Hover state of the link.

Grayscale link at InterACT.

Fig 17. Grayscale link at InterACT.

Grayscale hover state of link.

Fig 18. Grayscale hover state of the link.

On the other hand, there are aspects of websites that are important for visitors to recognize. For example, it is important for visitors to easily understand when they are hovering over a link. Visual cues are critical when creating differentiation between link states; however, color contrast is not the only way to clearly show these states. Link states can have visual characteristics that do not require the visitor to rely solely on color to determine the current state. If you add visual cues to show the various link states, color contrast becomes less of an issue. For example, InterACT’s website creates visual distinction between link states by changing the color and adding an underline to the hover state. The underline ensures that even in grayscale people can see the difference between states.

Each designer must determine the balance between design and readability—a decision often made easier when considering the target audience and the purpose of the website. The resources listed here are just a few of the many color and contrast tools available on the web; this is not a definitive list. The specific tools are not as important as making sure you include appropriate color contrast as part of your process. This will allow viewers, no matter how they interpret colors, to read and enjoy your website. Just as choosing the correct color combinations when you were a child would help your picture stand out in a sea of your classmates’ work, choosing correct color combinations when you design a website will allow your site to stand out on the web.

33 Reader Comments

Load Comments