When executed properly, the right color palette can prompt new visitors to your website, strengthen your branding, and drive sales and leads. But with an overwhelming number of colors to choose from, creating a harmonious color palette—and successfully implementing it into the design of your website—can be quite a challenge. Is it any wonder that so many UI design newcomers get it wrong?
In previous blog posts, we’ve taken you through exactly how to nail your website’s color palette. This time, we’re going to show you what not to do. We’ve rounded up the seven common mistakes that UI designers make with color, and what you should do instead.
Here’s what we’ll cover:
- Overlooking accessibility
- Chasing the trends
- Overuse of color
- Forgetting the user
- Not differentiating from the competition
- Trying too hard to be unique
- Using pure black for text
- Final thoughts
Before we jump in, check out this video presented by CareerFoundry UI design mentor, Olga. Olga explains what you need to consider when choosing a color palette, things to avoid, and top tips for picking the right color scheme:
Popcorn at the ready? Let’s get started!
1. Overlooking accessibility
The conversation surrounding accessibility in design is growing. But many designers still don’t realize that designing for a colorblind user, or someone who wears prescription glasses, is just as important as designing for somebody who doesn’t. Many of the world’s 200 million visually impaired people suffer from decreased sensitivity to certain colors and contrast. Not ensuring there’s enough contrast between two adjacent colors will make it especially difficult for hard of seeing people to navigate your interface. Consider placing light elements against dark backgrounds to make everything clearer.
2. Chasing the trends
It’s tempting to want to challenge design conventions by being experimental, but edgy colors that keep usability as an afterthought can result in a confusing interface that makes your users work a lot harder than they need to. Similarly, following trends for the sake of it will mean that when that color trend goes out of fashion, you’ll have to start again from scratch. Users have become used to common interface elements behaving in a certain way, so staying consistent with UI design conventions will reduce the cognitive load for your users, and allow them to navigate the interface intuitively. Remember, you want to create a website that is going to age well!
3. Overuse of color
Have you ever walked into a room with too many colors happening simultaneously and suddenly got a headache? The same can be said for digital interfaces. I love bright colors as much as the next designer—but overusing colors will only mean weakening the strength of each color you’ve decided to use. For example, if you use color to visually group too many overlapping sets of symbols, your users won’t know where to look. Headache alert!
A color palette shouldn’t exceed six colors, but to start with, most designers opt for three or four. These should comprise one dominant color, one standard color (used primarily for text, such as black or grey), and two accent colors. Be smart with your use of whitespace and make sure that your user’s eyes get an occasional break!
4. Forgetting the user
Many designers forget that the website or interface they’re designing isn’t intended for them. It isn’t intended for the client, either: it’s intended very specifically for the end user. While the personal preference of both the designer and the client can factor into it, it shouldn’t heavily influence the chosen color palette. All too often, UI designers fall into the pitfall of taking subjective feedback from the client way too seriously—and not defending methodological choices based on user research and user testing. The result? A website that your client will love, but the users won’t.
5. Not trying hard enough to be different from the competition
The numbers speak for themselves—the brand who has the most appealing color palette wins the game. Using a version of the same color palette that your competitor is using will not differentiate you at all from them, and if their brand is already well established, you’ll end up losing out on important leads. Do your market research, see what colors your competitors are using, and do it better.
6. Trying too hard to be different from the competition.
Similarly, it’s equally detrimental to try to stray too far from what the other websites in your sector are doing. This is mostly because of color psychology, the study of how colors can influence human mood and behavior. If your service requires a considerable amount of trust from your users (for example, an online banking service), color psychology determines that you should opt for blue—a color generally perceived as authoritative, dependable, and trustworthy. Opting for yellow or pink when most of your competitors have chosen their base color as blue could mean that you lose leads. Try using a version of that color that feels new and fresh—without being so ‘out there’ that people wouldn’t immediately recognize what your brand offering is.
7. Using pure black for text
Did you know that pure black against pure white can cause eye strain? Neither do a lot of UI designers, and so they often pick the blackest black especially for text in an attempt to achieve good readability through high contrast. Color harmony means not too little; contrast, but not too much either—meaning you should be careful when using 100% of any hue. The reason you should avoid pure black text on a white background is that white has 100% color brightness, and black has 0% color brightness. Such high contrast leads to a disparity in the light levels users see when reading text. To avoid making your users eyes have to work harder, opt for a dark grey instead.
8. Final thoughts
So there we have it, the seven common mistakes that UI designers make with color. To learn more about the role that color plays in UI design, check out one of these articles over on the blog: