- By Nick Babich
- January 25th, 2017
- 1 Comment
Color is arguably the second most important aspect of your app, after functionality. The human to computer interaction is heavily based on interacting with graphical UI elements, and color plays a critical role in this interaction. It helps users see and interpret your app’s content, interact with the correct elements, and understand actions. Every app has a color scheme, and it uses the primary colors for its main areas.
When designing a new app, it’s often difficult to decide on a color scheme that works well, as there are an infinite number of possible color combinations out there. In this article, we’ll go over the most important points related to color in apps. We’ll cover traditional color scheme patterns (monochrome, analogous, complementary), custom color combinations that aren’t based strictly on any one pattern, and we’ll also learn how to choose colors and contrasts for your app that support usability. If you’d like to hone your own color usage skills, you can download and test Adobe XD1for free, and get started right away.
Further Reading on SmashingMag: Link
- How Functional Animation Helps Improve User Experience2
- In-App Gestures And Mobile App User Experience3
- Best Practices For Animated Progress Indicators4
- Animated Microinteractions In Mobile Apps5
How To Select An Effective Color Scheme Link
When creating a color scheme there are many factors to consider, including brand colors and color associations for your region.
How Many Colors? Link
Keeping your color combinations simple will help you improve the user experience6. A simple color scheme isn’t overwhelming to the eye and makes your content easier to understand. Conversely, having too many colors in too many places is an easy way to mess up a design.
How To Create a Scheme Link
So, how do you choose those two or three colors? The color wheel can help.
There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners.
Monochromatic schemes are the simplest color schemes to create, as each color is taken from the same base color. Monochromatic colors go well together, producing a soothing effect.
The monochromatic scheme is very easy on the eyes, especially with blue or green hues.
As you can see, the scheme looks clean and elegant.
Analogous color schemes are created from related colors that don’t stand out from one another; one color is used as a dominant color while others are used to enrich the scheme.
While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated. For example, Clear20, a gesture-driven21 to-do app, uses the analogous colors to visually prioritize current set of tasks.
While Calm26, a meditation app, uses the analogous colors blue and green to help users feel relaxed and peaceful.
Colors aren’t always at odds with each other; complementary colors are opposite colors.
They contrast strongly, and they can be used to attract the viewer’s attention. When using a complementary scheme, it is important to choose a dominant color and use its complementary color for accents. For example, when the human eye sees an object full of different hues of greens, a bit of red is going to stand out very well.
However, you have to use complementary colors carefully to keep your content from being visually jarring.
Custom Color Scheme Link
Creating your own color schemes is not as complicated as many people think. Adding a bright accent color into an otherwise neutral palette is one of the easiest color schemes to create, and it’s also one of the most visually striking.
White canvases and cool gray copy, splashed with accents of blue, make up the Dropbox color scheme.
Adobe Color CC Makes Your Life Easier Link
Adobe Color CC41, previously known as Kuler, makes color selection extremely easy. Every color on the palette can be individually modified or chosen as the base color with a few simple clicks.
Palettes can be saved and added directly to a library. In addition, there are a number of great color schemes created by the community available on the site.
Check it out, so you don’t need to start from scratch.
The Impact Of Color Contrast Link
Typically, a colored object or area on a UI is not displayed in isolation, but is adjacent to or superimposed on another colored object or area. This creates contrast effects. Contrast is how one color stands apart from another. Properly used, it reduces eyestrain and focuses user attention by clearly dividing elements on a screen.
Contrast and Text Readability Link
Color contrast is one area where color theory is crucial to the usability of a design. Designers often like to use low contrast techniques because low contrast makes things look beautiful and harmonious. However, beautiful isn’t always the best for readability. When you’re using colors in text, be aware that placing two colors with low-value contrast next to each other can make your copy very difficult to read. This is especially true on mobile screens, where users are often on devices outdoors or in bright places that cause screen glare.
Make sure you have a fair amount of contrast between elements. It’s really not that hard — all you need to do is to check the contrast ratio. Contrast ratios represent how different a color is from another color (commonly written as 1:1 or 21:1). The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The W3C50 recommends51 the following contrast ratios for body text and image text:
- Small text should have a contrast ratio of at least 4.5:1 against its background.
- Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
This guideline also helps users with low vision, color blindness, or worsening vision see and read the text on your screen.
Icons or other critical elements should also use the above-recommended contrast ratios.
There are several free tools available to give you meaningful feedback about the levels of contrast in your chosen palette. One of them is WebAIM’s Color Contrast Checker56 which let you test colors you have already chosen.
Contrast and User’s Attention Link
Along with establishing readable text, contrast can also draw the user’s attention towards specific elements on a screen. Generally, high-contrast is the best choice for important content or key elements. So, if you want users to see or click something, make it stand out! For example, users are much more likely to click a call-to-action button that strongly contrasts with its background.
Designing For Color Blindness Link
Have you thought about your app appears to users who have visual impairments?
When people talk about color blindness58, they usually refer to the inability of perceiving certain colors. Red and green colors are a common problematic combination because about one-third of people are color-blind to red or green.
Since colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), it’s important to use multiple visual cues to communicate important states in your app. Never rely on a color solely to indicates system status. Instead, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.
Also, Photoshop61 has really useful tools to help, and can simulate color blindness. This feature allows the designer to see what the app’s screen will look like to people with different types of color blindness.
We’ve barely covered the fundamentals of how color theory can enhance your app UI design. Honing your color usage skills is an ongoing endeavor. If you want to learn how to create beautiful, functional color schemes, all it takes is practice, determination, and lots of user testing.
This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app65 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.
You can check out more inspiring projects created with Adobe XD on Behance66, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free67.
(ms, aa, il)
- 1 https://adobe.ly/2iHmxQr
- 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
- 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
- 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
- 5 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
- 6 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
- 7 http://www.dgp.toronto.edu/~donovan/color/colorcomp.pdf
- 8 https://color.adobe.com/create/color-wheel/
- 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
- 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
- 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
- 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
- 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
- 14 https://color.adobe.com/
- 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
- 16 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/a081d_4-preview-opt.jpg
- 17 https://twitter.com/louis_saville
- 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
- 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
- 20 https://itunes.apple.com/en/app/clear-tasks-reminders-to-do/id493136154?mt=8
- 21 https://blogs.adobe.com/creativecloud/in-app-gestures-and-mobile-app-user-experience/
- 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
- 23 https://color.adobe.com/
- 24 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
- 25 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/84ba5_7-preview-opt.jpg
- 26 http://www.calm.com/
- 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
- 28 https://color.adobe.com/
- 29 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
- 30 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/f8882_9-preview-opt.png
- 31 https://blogs.adobe.com/creativecloud/how-the-calm-app-uses-empathy-and-simplicity-to-connect-with-users/
- 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
- 33 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
- 34 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/f8882_11-preview-opt.png
- 35 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
- 36 https://color.adobe.com/
- 37 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
- 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
- 39 https://blogs.dropbox.com/
- 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
- 41 https://color.adobe.com/
- 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
- 43 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
- 44 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/54ac1_15-preview-opt-1.png
- 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
- 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
- 47 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
- 48 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
- 49 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/cdd41_18-preview-opt.jpg
- 50 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- 51 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- 52 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/cdd41_19-preview-opt.jpg
- 53 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
- 54 http://material.google.com/
- 55 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
- 56 http://webaim.org/resources/contrastchecker/
- 57 http://www.webhostingreviewsbynerds.com/wp-content/plugins/rss-poster/cache/e9a47_21-preview-opt.png
- 58 https://en.wikipedia.org/wiki/Color_blindness#Dichromacy
- 59 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
- 60 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
- 61 http://www.adobe.com/accessibility/products/photoshop.html
- 62 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
- 63 https://ru.pinterest.com/pin/396457573423276783/
- 64 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
- 65 https://adobe.ly/2iHmxQr
- 66 http://adobe.ly/1U9LS0E
- 67 https://adobe.ly/2iHmxQr
↑ Back to top