Jake Worth

• design
• a11y

A design principle that’s crept into my programming could be summarized as:

“Absence of color is better than the wrong color.”

Color in user interfaces is hard. It’s a powerful overlay to your design that can carry positive, negative, or conflicting messages. It should be carefully applied in isolation from other design choices.

An esteemed web designer I worked with once told me: “Color is the last step of my designs.” They’d make grayscale mockups, then pixel-perfect renderings, choosing fonts, icons, buttons, layouts, etc. At the very end, they’d sparingly apply colors: a brand-colored button, a secondary brand-colored link to send a support email.

Casual web users see color as a way to jazz up a page. Unfortunately, whether we like it or not, color can carry a lot of meaning.

In Don’t Make Me Think, Steve Krug argues that we should ask our users to make as few arbitrary decisions as possible. When they’re thinking, you’re losing money. Let’s use Steve’s approach to intuit what a button does, knowing only how it looks. Here are two red buttons on a page:

I’ve blurred out the copy. Now, what do you think these buttons do? If you had to click on one of them without being able to see its label, would you?

As you may have guessed, this is Github, a site that almost never uses red. The first label reads “Change Visibility.” Would you like to open-source your company’s codebase? The second label reads “Delete This Repository.” Would you like to delete your company’s codebase? Github smartly puts these buttons in a group called “Danger Zone” at the bottom of an obscure page.

Red is a color of danger; in Krug’s terms, we’ve been trained to see red and “think.” I once worked on an application that used a red banner at the top of every page to advertise seasonal promotions. Intellectually, I know that red is a Christmas color, yet I couldn’t help seeing that banner as a warning. I’d wager that banner’s color hindered its engagement.

If you aren’t sure what color something should be, make it neutral or brand-colored. Then, test to figure out what works. If you can prove a red banner increases conversion versus other colors, go for it.

Color should complement all the other indicators on a UX element. Here’s how color could augment a random button we just found:

• It’s a button, with skeuomorphism. This tells me: “This does something.”
• It’s at the bottom of a form. This tells me: “This is relevant to the form you just filled out.”
• It’s on a page with a scary title: “Delete Your Account.”
• The button has a scary label: “Delete Your Account” (not “Save” or “Submit”).
• There’s ominous text beneath the button: “This is an irreversible action!”

This button is loaded with context. Now, we can augment all the unanimous messages with that powerful color red.

It’s estimated that 300 million people in the world have some version of color blindness. So, if color is the only thing telling me I’m about to do something consequential, like delete my account, millions of potential users might get it wrong.

What are your thoughts on color in design? Let me know!