In this article I’m going way back to basics and talking about color. I know that you design nerds already learned more about color in your second year at uni than you probably ever needed to. But first, this isn’t a color class; and second, not everyone is a design nerd. Also, there are some nuances to using color effectively in UI designs that are easy to overlook.

So let’s get to it!

Applying the Brand

Almost all UX designers are either working for a company or working for an agency that’s working for a company. And all companies have some sort of brand system that probably includes colors. Most brand systems include a primary color and a couple of secondary colors, some neutrals and a few accents. Or you might be unlucky and have every color possible. But either way, the brand has colors and it’s your job to figure out how to apply them effectively to a product interface.

Taming a brand color system and making it work for a coherent UI can be a challenge, but here are a few tips to get started.

First, pick out any colors that don’t meet Web Content Accessibility Guidelines (WCAG) contrast standards (more on that later). Right away you know that you can use those for backgrounds or certain accents but not for buttons, text, or icons.

Then do some experiments to see how you can pull in your brand colors and make them work together. This may take some time, but remember that you’re trying to convey the brand through the user interface, so you can look to other company materials, including print pieces. The brand and marketing teams are your friends, so check in with them for advice and feedback.

Be bold where you can get away with it. Gradients are back and can pack a lot of visual punch when used correctly. Be careful, though; while using super bright, multicolor gradients can bring visual interest and power to your design, you should avoid the bland skeuomorphic look of yesteryear. (Hubspot says skeuomorphism is “controversial.” They are wrong — it sucks.)

Dark Mode Can be a Challenge

Dark mode is all the rage and lots of people use it, for good reason. But designing a dark-mode UI isn’t as simple as just making the background dark and the text light. You need to evaluate how your iconography, buttons, and accents work on a dark background. I won’t discourage you from designing a dark version of your product, but keep in mind that it can entail quite a bit of work and significant additions or updates to your design system. Even Apple sometimes gets it wrong.

Avoid Problematic Connotations

I know I said that I wasn’t going down this path, but there are some obvious things to be aware of when designing a product UI. Certain colors are associated with specific states or actions. For example, red often means danger or error and green is usually coded as success or good. So using red for your primary actions could be problematic because people might infer an error or danger state. They will figure it out, but you may increase cognitive load on the user. Also, how would you draw attention to an actual error state that requires user intervention?

I’m not saying you can’t use colors in new and fun ways, but it’s important for designers to consider whether that’s the best option. Remember that UX design is not art, and we don’t get to write our own briefs.

Accessibility

And now for the big one: accessibility. When designing UIs we have to ensure that our color choices produce sufficient contrast so that people can read content and understand actions. And we also need to account for folks with colorblindness.

Color Vision Deficiency (aka Colorblindness)

Color vision deficiency is much more common in men than women, affecting about eight percent of men in the United States. There are several different types of colorblindness, but they generally fall into three categories:

• The most common type makes it difficult to differentiate between red and green.
• Another type causes blue and yellow to appear similar.
• In rare cases, people have complete color vision deficiency, meaning they don’t perceive color at all.

Red-green colorblindness — called deuteranopia — is by far the most common, affecting more than five percent of the population. Sometimes people take this to mean that we can’t use red or green at all, but that’s not quite true. It does mean that designers need to carefully consider which colors to use; some tints and shades are easier to perceive than others.

But most important, we need to not rely on color alone to convey meaning. Per WCAG Success Criterion 1.4.1: “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

Let’s look at an example:

The left table doesn’t work because we’re relying on color alone to convey the status. The right table works better because the icons convey the status even if colors are not visible. The problem becomes obvious when we process our tables through a colorblindness simulator:

It’s important to test your colors using a colorblindness simulator when considering colors for your user interfaces. With the Coblis simulator you can upload an image and see how it appears to people with different types of colorblindness. Adobe Color also offers a tool to help you test your color choices.

Contrast, Contrast, Contrast

And this brings us to perhaps the most common, yet easy to fix, problem: contrast. WCAG 2.1 specifies that, “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.” There are some exceptions, but 4.5:1 is a good target in all cases.

In this example, the table on the left uses a lighter color (#999999), which provides only a 2.85:1 contrast ratio. This falls short of the WCAG guideline of 4.5:1 and could be difficult to read.

WCAG includes three levels, labelled A, AA, and AAA. Level AA is considered sufficient for the vast majority of people and it’s the level that most of us design for. Consequently, in this article I refer to WCAG 2.1 level AA.

It’s important to test your color choices to ensure that your design offers sufficient contrast between the foreground and background. This includes both text and icons. Fortunately, there is an abundance of tools for testing this. I prefer the WebAIM contrast checker, but Adobe Color includes one as well.

I most often run into contrast problems when trying to apply brand colors to UI designs. Brand kits are usually designed for a variety of media including print, television, and out-of-home (OOH). Oftentimes brand designers don’t account for accessibility, or if they doWow, is it’s not a priority. So UI designers may end up having to adapt company palettes to work online.

As you can see, there is a lot to consider when choosing and applying colors to your UI designs. But it’s not as hard as you think — by performing a few simple checks and applying good visual design practices your user interfaces will look good and will be accessible for all.