Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks.

Horizon Theme Color Palette

The Horizon theme color palette introduces a unified color palette that brings our brand and products together in order to achieve a cohesive experience across all SAP touchpoints.

The Horizon theme color palette is designed to provide bold and vibrant color while remaining accessible in instances with complex UIs.

Accessibility Logic

The Horizon color palette introduces nine tonal values across eight color hues of vibrant and bold color. To ensure that color combinations comply with WCAG accessibility standards, a system has been developed that enables designers and developers to easily create compliant color pairs.

3:1 Color Contrast

To achieve a minimum of 3:1 color contrast ratio, pairing any color that is four steps apart will achieve this. For example, pairing the fourth color with the eighth color in the spectrum ensures that the minimum color contrast ratio for large text, bold text, graphical objects, and user interface components is met.

4.5:1 Color Contrast

To achieve the minimum color contrast ratio of 4.5:1, pairing any color that is five steps apart will achieve this. For example, pairing the fourth color with the ninth color ensures that the minimum color contrast for normal text is met. 

UI Colors

From the Horizon color palette a semantic name layer is added to help designers and developers decide which colors to use. UI colors are grouped according to their usage into the following five categories:

Surface Colors

Surface colors are applied to the background of all components. To provide a sense of hierarchy, surface colors are identified by the letter S followed by a number sequence (e.g. S1, S2, S3).

Text Colors

Text colors are applied to the text and icons of all components. Text colors are identified by the letter T followed by a number sequence (e.g. T1, T2, T3).

Border Colors

Border colors are applied to linear elements such as divider lines and the border line surrounding the text input field. Border colors are identified by the letter B followed by a number sequence (e.g. B1, B2, B3).

Semantic Colors

Semantic colors are applied to any UI element that conveys an important status, state, or level of priority. Semantic colors can be identified by the following naming (e.g. negative, critical, positive, and neutral status).

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI such as avatars, icons, and data visualizations. Accent colors are identified by the word “Accent” followed by a number sequence (e.g. Accent 1, Accent 2, Accent 3).

Light and Dark Theme Elevation

Elevation plays a key role in our Horizon color palette. In light theme, the drop shadow represents the elevation of the components. However, in dark theme, elevated components are differentiated by changes in tone to mimic a range of depth. At lower elevations, the surface tone is darker while at higher elevations the tone is lighter. Refer to the following table to understand elevation. 

Resources

Development: Theming and Styling

Fiori for iOS: Colors