Color

Color helps to provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. When picking app accent colors strive to conform or adapt to, thus fulfill, accessibility requirements. (See WCAG)

Don’t rely solely on color to differentiate between objects or communicate important information. If your app uses color to convey information, be sure to provide text labels and/or icons, so users with colorblindness or other visual impairments can understand it.

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Consider choosing a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Consider choosing a color to indicate interactivity throughout your app. If/when you define an accent color that denotes interactivity, make sure other colors in your app don’t compete with it.

Provide two versions of your primary and/or accent colors to make sure it looks good in both light and dark modes.

Avoid using the same color for interactive and non-interactive elements. If interactive and non-interactive elements have the same color, it’s hard for people to know where to tap.

Test your app’s color scheme in a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. The colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger; in others, red has positive connotations. Make sure the colors in your app send the appropriate message to a local or global audience accordingly.

Avoid using colors that can make it hard for people to perceive content in your app. For example, a colorblind user might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read for users with visual disabilities. (See contrast checker).