UX Training: How To Optimize the Use of Accent Colors

Color is a crucial tool in a designer’s arsenal. When used correctly, a well-thought-out color palette will help communicate a brand’s values and personality, as well as guide users and enhance usability. 

It’s important to underline that finding the right set of colors for a product is a tricky process that requires a fair amount of analysis, and a fair share of trial and error.

In today’s article, we’ll take a closer look at how you should use accent colors to help optimize your users’ experience (UX) with the products you design.  

Let’s dive right in, shall we? 

Any color scheme starts with Newton’s color wheel, which dates back to the 17th century. Hundreds of years later, we use this invention to identify harmonious color combinations using geometric relationships within the wheel. While this may sound daunting, it’s not that complicated, we promise. Let’s take a closer look at some of the most common color schemes:

Once you’ve found what appears to be the most suitable combination of colors for a product’s design, it’s essential to organize them into primary, secondary, accent, neutral, and semantic colors. 

Your primary colors will be the ones you’ll use most frequently within a product’s user interface (UI) — they’re essential when it comes to translating a brand’s identity and amplifying brand awareness. 

Brands typically have anywhere from one to five secondary colors. While not imperative, it’s always a good idea to limit their number to make the brand’s palette more recognizable. It’s worth mentioning that “secondary” and “accent” colors are used interchangeably in some contexts. As a rule of thumb, think of accent colors as part of secondary colors, but not the other way around.  

Your accent palette is meant to complement your primary color palette. Accent colors aren’t used as frequently as the ones above, allowing to make certain UI elements more visible.  

Neutral colors are often anywhere in between black and white. They are commonly used for text color, whitespace, and so forth.

Semantic colors are essential for a user’s guidance throughout a UI. They communicate meaning that allows people to navigate a product intuitively. 

Now that we’ve explored the context in which accent colors are used, let’s take a close look at their importance in UX design.

Accent colors are vital when it comes to accentuating a wide array of UI elements like buttons, progress bars, sliders, switchers, links, headlines, and so forth. Also, they’re a great way to draw the user’s attention to important information. Typically, designers select accent colors that are more saturated, allowing to make these elements more visible. As a result, this encourages users to interact with them. 

A second accent color allows designers to diversify the types of elements and information presented in the UI. However, it’s important to note that having too many accent colors can make a user’s interaction with a product somewhat visually taxing.

Let’s say you’ve defined a product’s color palette and you like what you see. How do you translate this combination of colors into a harmonious UI? Let’s take a closer look at some guiding principles and best practices for using accent colors.

Probably one of the most popular principles that guide the use of accent colors is the “60-30-10 rule”. A great way to visualize this rule is to think of it as a suit  — 60% are the pants and jacket, 30% are the shirt, and 10% are the tie. About two-thirds of your color use should be dedicated to your primary color; it’s the driving force in your palette. A third should be reserved for the secondary color that aims to complement the dominant colors. Accent colors are but a fraction of your UI, but they’re there to make your interface more vibrant and energetic. 

This rule also provides a fair share of flexibility. For instance, if you want to use two secondary colors, feel free to divide the 30% by two, thus achieving a 15% dominance for each of them.

There are also a few things we need to actively avoid or be mindful of when working with accent colors. 

Because accent colors are typically used to highlight important information, there are a few more principles you should take into account:

So how can you systematically create harmonious accent color palettes? The 60-30-10 rule can be a useful guiding principle here. Once you’ve established what your primary color is, go back to the color schemes we’ve mentioned above and use them as your reference for creating an accent color palette.

Particularly when designing for digital interfaces like websites and mobile apps, accent colors are often on the “bright side” of the color wheel. Especially when it comes to choosing accent colors for elements like buttons, we suggest staying in the top-right of the wheel. Typically, this is where you will find the more energetic and contrasting color options.

Now that you’ve created a palette you feel confident about, it’s time to run some tests. The most straightforward way to do that is using services like Palettte, Material, Cloudflare, and others. With these tools, you’ll be able to create mockups or prototypes and see how your accent colors perform when put in action.

To take your test to the next level, it would be great to have some real users evaluate your designs. This scenario is more common in organizations that stay true to the UX design process and have a budget allocated to such activities. However, it’s important to mention that there’s a wide array of user testing methods that are very inexpensive, like Guerrilla testing and so forth.  

Bear in mind that aside from being aesthetically important, colors also have a massive impact on the usability of buttons, links, and other components. For instance, making a button gray can make it appear disabled. 

Now that you’ve created some quick mockups and maybe even have some feedback from potential users, it’s time to present your palette(s) to your team and stakeholders. It’s also very important to limit the number of mockups and palettes you put in front of your reviewers. Here, quality is above quantity. 

Once your palette is approved, it’s time to give it some structure. There is a wide array of online tools like Coolors, Adobe Color, and some of the ones we’ve mentioned above that can help you export the palette of your choice in a neat file. You can also choose to add the hex codes if that’s something your team will need. 

You can also draw some inspiration from other brand’s color guidelines and how they choose to present their palettes. Here are a few examples from Atlassian, Mailchimp, and IBM.

Creating a color palette is much, much more than just a series of happy accidents. It takes a lot of hard work and creative thinking to create a palette that will communicate a product’s identity, appeal to its users, and satisfy usability standards at the same time.

Tasks like these demand a fair share of experience and learning, both of which you can get with UX 4Sight’s training and certification programs. Let’s get those UX design skills up a notch.