Color

Color can indicate interactivity, impart vitality, and provide visual continuity.

In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

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

Test your app’s color scheme under a variety of lighting conditions in an actual car. Lighting varies significantly based on time of day, weather, window tinting, and more. Colors you see on your computer at design time won’t always look the same when your app is used in the real world. Consider how color brightness may affect driving conditions at night, and how low-contrast colors may wash out in direct sunlight. Always preview your app under multiple lighting conditions to see how colors appear. If necessary, make adjustments to provide the best possible viewing experience in the majority of use cases.

Favor dark backgrounds. Light backgrounds can be distracting, especially at night. In general, light content on a dark background tends to work well in most lighting conditions.

Be aware of colorblindness and how different cultures perceive color. People see colors differently. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness. Also consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red is used to communicate danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. A contrast ratio of 7:1 or higher is preferred. An online color contrast calculator can help you accurately analyze the color contrast in your app.