• #FormalTraining
  • #VisualDesign

UX Training: How To Optimize the Use of Accent Colors

ux 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? 

Color Schemes in UX Design

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:

  • Monochromatic – use three different versions of the same color
  • Analogous – use three colors that are adjacent to one another
  • Complementary – use colors located on the opposite side of the color wheel
  • Split-Complementary (or Compound Harmony) – a combination of the analogous and complementary schemes. Think of it as an analogous scheme, except the color in the middle is located on the opposite side of the wheel
  • Triadic – use three colors that are an equal distance from each other on the color wheel
  • Tetradic – use four colors that are two pairs of complementary colors

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. 

What is Accent Color in UX Design?

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.

How to Use Accent Colors?

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.

Best Practices in 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.

Things to Avoid in Using Accent Colors

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

  • Given that accent colors are an important vehicle for meaning, it’s advisable to make sure they don’t “send mixed messages.” For instance, a common mistake designers make is using the same color for accents and errors. This can confuse the user by triggering an unnecessary emotional response.

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

  • Think about usability — your texts should be easy to read when they appear on an accent color background. The two should have enough contrast so that people with low or impaired eyesight are able to read the text comfortably. There is a wide array of tools that can help you assess the accessibility of your text and background contrast.
  • While color psychology is extremely useful when communicating information in a UI, we shouldn’t rely on color alone. Always use text as a supporting means to convey meaning to enhance the usability of a design for people with color blindness.

Create a Systematic Plan in Building an Accent Colors Palette

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.

Test Your Accent Colors in the Overall Color Palette

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. 

Get Feedback From Your Team

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. 

Finalize Your Palette

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.

Take Your UX Design Skills To the Next Level

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.

5 Ways UX Affects AR, VR & Profitability whitepaper banner
Get Latest Whitepaper

Get Latest UX/UI Trends and Best Practices

GET WHITEPAPER
Abdul SuleimanAbdul SuleimanChief Experience Officer

Abdul has helped over 40 Fortune 500 companies make informed user-centered design decisions through evidence-based user research and UX best practices. As an Adjunct Professor, Abdul has taught in DePaul University’s graduate UX programs and for nine other universities.

smiley-good
Let's Chat

Ready to learn more about how our award-winning UX agency can help you?

GET IN TOUCH