Colors

Selecting a good color combination isn't the most vital part of designing a high-quality interface, but it is important. Get your choices wrong, and users might find your applications unengaging or uncomfortable to look at. Or even worse, people may not be able to read the information they contain at all. In this topic, you will find out about some pitfalls to avoid and learn how to pick great colors that help to ensure your apps are compelling and accessible.

Pitfalls to avoid

It's best not to get too hung up on choosing the perfect color combination. Designers (and developers) often get stuck at the stage of working out the visual style of an application, naively believing this will control whether people want to use the service. In short, that isn't the case. Choosing one shade of color instead of another often determines very little. However, if you dive deeper into this subject, you will learn that it is necessary to consider certain factors carefully.

You need to avoid making your project visually impersonal because of a lack of color. But, on the other hand, you don't want to overdo it and turn the interface into a rainbow!

These points should be easy to appreciate if you've prepared lecture presentations or sat through them.

It can be tough to understand the information shown on the screen if you can't visually divide the image into zones and recognize a consistent pattern — something like all the text being orange on a black background with white buttons.

Unfortunately, as you can see below, such mistakes sometimes happen!

Let's skip the part about fonts (we'll talk about that in another topic) and focus on colors.

Sometimes, in the pursuit of a "corporate identity," companies choose terrible combinations that repel users:

The above examples may seem eye-watering to you. But in some cases, commercial projects aren't a lot different from them. So, how can we prevent this from happening?

Choosing colors

One thing you should never forget is that white and dark gray/nearly black are your best friends in pretty much any situation. Almost all interfaces use "neutral" colors to some extent.

Generally speaking, interface colors are usually a combination of white, gray, and a dark tone, with an accent color to highlight the application's interactive elements.

You're unlikely to go wrong if you make the interface predominantly white with dark buttons, gray input fields, and about ten percent devoted to your corporate accent color. Just take a glance at the JetBrains Academy screenshot below:

To see how common this practice is, try opening websites like Google, Yandex, YouTube, Facebook, VK, Instagram, Amazon, Twitter, Wikipedia, Reddit, and so on.

Good combinations

Okay, we've covered the basics, so what's next? To choose a combination of accent colors for your project, you can find simple color palette services on the internet. These provide wonderful combinations of shades that look great together, which have been selected by experienced designers (and maybe even computers).

To view one, you can visit the free service https://coolors.co and click the Explore trending palettes button:

You will see a large number of different combinations that look good with each other. Using filters and sorting, you can set an initial color from which the system will start when selecting palettes and see the newest combinations or the most popular ones.

You can then hover your mouse over any color and copy its code to your project. It's also possible to click the View palette option for detailed technical information or select Open in the generator to manage the chosen palette and select different shades.

Contrast for readability

Choosing beautiful colors that combine well with each other is only half the battle. It's essential to make sure the information is easy to read on-screen as well.

One of the most valuable services when considering color contrasts is https://abc.useallfive.com. It allows you to choose a combination of colors (starting with two) and shows how well they contrast measured by ADA compliance level. Each cell shows a group of colors (text and background) and an indicator of visual perception. The rating of the combination of your palette is shown on the left.

Conclusion

It's best not to spend too much time choosing the color combination to use in your project. But the decision can play a significant role in determining how much users enjoy looking at your app and how easy it is to read the provided information — something particularly important for those with visual impairments.

You shouldn't chase fashion and use as many colors, sharp contrasts, and gradients as possible. Leave that to artists and participants of visual design competitions. Your task is to make the interface convenient and intuitive. Don't forget there are plenty of tools on the web that can make this job easier. If you utilize some of these and follow the guidelines suggested in this topic, you should be well on your way to producing great-looking applications.