.png)
There are many factors that come into play that keep people using the products they love. One of them is color. Have you ever thought about the emotional impact colors have in a user interface?
Emotions are complex, unpredictable, and directly connected to the success of the products we create. Many successful applications included features early on that started as “nice-to-haves” that attributed to their success - from the UX and visual design to the app’s ability to create a deeper emotional connection with users.
Applying universal design principles - especially color theory best practices - allow us to use psychological tricks to influence emotions and draw out positive reactions.
Don’t take color selection lightly. Color is as powerful as language. It is a force that guides the tone of your design. Several studies show colors can make us feel sad or happy, stressed or relaxed, etc. They communicate tone, personality and mood. How do you want your product to be seen? New and exciting or classic?
How to unleash the power of color in the interfaces you design
Use color psychology when deciding how you want to be seen
Unless you’re taking risks and want to be seen differently, use color theory to gauge your design decisions. Emotions instilled by color can differ in context but also from one group to another.
Take, for example, in western countries we see red related to “love" thanks to Valentine's Day. Yet, in other contexts, it may mean “stop.” In African cultures, red conveys death and grief! This is why you need to start by understanding what color means to the demographic you’re designing for. Work with a color palette that generates the right emotion in the minds of your audience.
If you need a refresher, there are a lot of color theory cheat sheets online. I really like this breakdown. (Unfortunately, I don’t know who to attribute this to! Whoever put it together has created an amazing resource to have handy, especially if you’re starting on a white canvas.)
Another helpful reference is this 2013 survey created to uncover the emotions based on color associations and preferences. There is some interesting data we can apply to our designs here.
The 60%, 30%, 10% Golden rule.
When I start a new design project, I spend a huge chunk of my exploration time working with colors until I land on the perfect palette. To create balance in your UI, the 60%, 30%, 10% rule will help.
Typically, you’d need 3 sets of colors:
Your actionable color. This can be your main brand color, but not necessarily. This one will be applied to ~10% of the UI.
Your secondary colors. These may be your accent colors and support colors. These colors will use ~30%.
A neutral set of colors. These are your grayscale, medium-light colors, or dark-dark-medium depending on whether your design is a dark or light theme. These colors will be used for most foundational UI, typefaces, cards, etc. They will compose 60% of the UI.
Using this formula to evaluate your progress while you are designing will help you achieve harmony in your UI.
Tone, tint, shade and semantic colors.
You can’t have just a few colors and call it a day. For every color you want to use in your interface, make sure you have the “pure color” and its correspondent, tint, tone, and shade. Also, make sure to define semantic colors to denote system visualization status--such as good, bad or warning--to ensure they harmonize with the main color palette.
Check color contrast early and often
For colors that will impact readability and use of the interface, make sure to check color contrasts. I like to test different variations and mark each of those as “passed” on my pattern library, style tiles, or design system.
In order to meet WCAG AA color requirements, contrast ratios should be at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text (recommended). There are many tools that can help you test color contrast. One of my favorites is Coolers.co.
Final Thoughts
Color is fundamental to an interface, and like any other aspect in the UI, deserves careful consideration. Make sure to allocate time in your process to organize your palette and make it emotive and accessible.
