Color in Digital Design
How do we choose color in digital design? In print, we have the Pantone fan and what you see is what you get — as long as your printer is color calibrated. With computer monitors, one does not get such precision, even within one office. So how much time and effort do you spend on color selection? What you select could be your agency or office standard for the next five, ten or one hundred years! No pressure.
By C. B. (probably Claude Boutet or it’s editor, Christophe Ballard[1]) [Public domain], via Wikimedia Commons
Remember the colors of the box of your favorite cereal? Of course you do, even if it’s from when you were a kid. If the color changed next week, you wouldn’t recognize it; you would have trouble finding it in the cereal aisle and might even ask someone in the store for assistance. Well, website and online apps work much the same way. So, choosing colors that will last is highly important.
In my experience, many of the Ivy League colleges (and hidden Ivies) have excellent style guides with sample do’s and don’ts for both digital and print. They make wonderful templates!
In a recent UX Community topic thread on color in digital design, many members shared their experiences and style guides. Arva Adams of the U.S. Patent and Trademark Office (USPTO) noted, “The most successful brands have one or two brand colors, and then list complimentary colors to use, but aren’t called “brand colors.” Think Sprint’s yellow and black, McDonalds’ yellow and red, BP’s blue, yellow, and green, and FedEx’s orange and blue. We have too many colors to really call our colors “brand colors,” but having our defined color guidelines takes hours of guesswork out of our project schedules.” Visit the USPTO UI Design Library on GitHub to see their excellent work. You can submit recommendations or “fork” your own to use and customize for projects.
Whether you want colors that are deep and rich, warm and inviting, or light and airy, it is important that those colors work with a little thing called Section 508 Compliance. Why? Because it’s the law. Tanya McIlravy of U.S. Department of Agriculture (USDA) also shared her firsthand experience and stated the importance of “viewing your page in grayscale to gauge proper contrast” so that “your purposeful use of color isn’t lost.” She goes on further to note, “red doesn’t read as red, but rather the same as the blue or green … so a warning text or important item could be missed,” and that “Gradients are uncomfortable to view, especially as a background because the contrast changes as you go down the page and when you are searching for contrast as part of visual cues, you get ‘lost.’”
Jennifer Horan of the Consumer Financial Protection Bureau (CFPB) added, “Remember, for 508, colour alone cannot indicate importance. You need programmatic cues as well.” when discussing how a dialogue box or other features that grabs a user’s focus could be a great solution regarding the need for visual cues for important items that are often called out in color. She also noted the great work their team put into their Design Manual when it comes to colour, contrast, and text size and weight.
Atul Varma of 18F recently created my new favorite tool for determining combinations with 4:5:1 contrast ratio or higher for a custom color palette. This is an important first step because when you select colors, you want them to be consist throughout the website. You don’t want to tweak the hexadecimal colors three different times — and end up with 5 different blues and 11 total colors in one website. Gag!
Another approach to color selection is to utilize the guidance of the U.S. Web Design Standards, created by 18F and the U.S. Digital Service. You may find the Color Palette section to be of great help — for more information, watch DGU’s U.S. Web Design Standards Update webinar that was held on January 25th. (Short on time? Read the highlights recap.
Additionally, you could always go for a simplified approach where the base scheme is black & white, with just one or two colors for highlights. It’s not so bad — check out the man websites for National Park Service (NPS), the Office of Personnel Management (OPM), and the Smithsonian Institute.
