UI – Header & Footer Examples

Color

Color is a great way to provide status information, give feedback in response to user actions, and help people visualize data.

Use color judiciously for communication. In general, color should be used sparingly, like when you need to call attention to important information. For example, a red triangle that warns people of a critical problem becomes less effective when you use red elsewhere in an app for noncritical reasons.

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 correct message.

Avoid using colors that make it hard for people to perceive content in your app. For example, colorblind people 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 guidance, see Color and Contrast.

Example 1 – Black/dark grey background + white/grey text

Reference:

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/