Updated: August 7, 2017

Colors

Intro

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks.

Color Balance

Color balance refers to the recommended mixture of color and contrast.

Defining the correct color balance for each screen ensures a visual rhythm throughout the application. It also helps to draw users’ attention to the app’s most important information and functions. A well-executed color balance promotes a distinct and consistent look and feel across all SAP Fiori iOS apps.

Color Scheme

Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color schemes and select options that provide a sense of cohesiveness to your app.

Main Colors

Main colors set the tone of SAP Fiori for iOS and ensure that the information presented to users has sufficient visual contrast.

Tint Colors

Tint colors indicate to the user that certain app elements are interactive—for example, text and icons. There are two tint colors: light and dark tint. Light tint is used for content presented on a dark background, while the dark tint is applied to content on a light background.

Be mindful that tint colors are only used for interactive elements, and avoid using color hues similar to the tint colors for non-interactive elements.

Semantic Colors

Use semantic colors to call attention to important information. This information may be positive, negative, or critical. For example, semantic red warns the user that a particular task needs attention.

Accent Colors

The recommended accent colors work harmoniously with SAP Fiori for iOS’s default color scheme and are typically applied to backgrounds, dividers, and lines. Avoid using accent colors in the text.

Text Colors

Text colors may only be applied to non-interactive elements.

Chart Colors

Use chart colors for analytics-related components.

Color Contrast Ratio

To provide users an optimal experience with your app, it is critical to consider its color contrast ratio. As an example, when text and icons have insufficient color contrast ratios, they may appear to blend in with the background, which can lead to accessibility and usability issues. At a minimum, strive for a 4.5:1 color contrast ratio, though a 7:1 ratio is preferred.

To determine the appropriate color contrast, use an online color contrast ratio calculator.