XD Essentials: The Power of Color In Mobile App Design
by Nick Babich
posted on 10-19-2016
Color can be the second most important aspect of your app other than functionality. The human-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 right elements, and understand actions. Every app has a color scheme, the primary colors it uses for its main areas. When designing a new app it’s often difficult to decide on a color scheme that works well for it, since there are an infinite number of possible color combinations out there.
In this article we’ll go over the most important points related to the color in the app: 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.
How To Select an Effective Color Scheme
When creating a color scheme there are many factors to consider, including brand colors and color associations for your region.
How Many Colors?
Keeping your color combinations simple will help you improve the user experience. 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 a really easy way to mess up a design.
How To Create a Scheme
So how do you choose those 2 or 3 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 they’re all taken from the same 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, Clear, a gesture-driven to-do app, uses the analogous colors to visually prioritize current set of tasks.
While Calm, 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 kinds 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
Creating your own color schemes it’s 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 grey copy splashed with accents of blue in Dropbox color scheme.
Adobe Color CC Makes Your Life Easier
Adobe Color CC (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 right to a library, and there are a number of great color schemes created by community available on the site:
Check it out so you don’t need to start from scratch.
The Impact of Color Contrast
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
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, but 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 should have a fair amount of contrast between elements. It’s really not that hard — all you need to do is to check 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 W3C recommends 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 Checker which let you test colors you have already chosen.
Contrast and User’s Attention
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
Have you thought about how does your app appear to users who have visual impairments?
When people talk about color blindness they usually refer to the inability of perceiving certain colors. Red and green colors are a common problematic combination, because about one-third of color blind people are completely 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.
Further to this, Photoshop has really useful tools to help. It can simulate color blindness. This feature allows the designer to see how the app’s screen will look like for people with different types of color blindness.
We’ve only just covered the fundamentals of how color theory can enhance your app UI design. Honing your color usage skills is an ongoing endeavour. The best way to learn how to create beautiful, functional color schemes is to practice and do lots of user testing.
Topics: Creative Inspiration & Trends, Design
Products: Photoshop, Creative Cloud