Accessibility Provided at Framework Level

Visualization

Minimum contrast: Following the requirements of the international Web Content Accessibility Guidelines WCAG 2.1 (see References), SAP Fiori’s default theme was designed to fulfill the requirements for minimum color contrast. In addition, we provide high-contrast themes that support the required contrast ratio of 7:1 for texts. They can be chosen in the user settings. The individual theme choice is saved as a preference until the user changes it again.

More information:

• Theming
• High Contrast Black Theme for SAPUI5 (SAP Help Portal)

Consistency of icons: A comprehensive icon library ensures consistent icon usage within a product and also across products. The icon library includes predefined descriptions. This enables the development teams not only to use consistent icons, but also to implement meaningful descriptions for tooltips as a textual alternative for graphical representation. However, in some cases you may need to adapt these descriptions to the specific use case.

For more information, see Iconography.

Keyboard focus visualization design: Focus visualization is very important for user efficiency. SAP Fiori uses a contrast ratio that makes the current focus stand out in all themes.

Layout adaptation for different devices: Since SAP Fiori can run on various devices, it comes with a responsive layout that adapts to the display resolution parameters of the individual device.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

Support for text resizing: Users can adjust the font size themselves using the browser zoom. The responsive layout adapts to these manual adjustments automatically.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

Keyboard Support

Keyboard navigation and control interaction: All standard UI elements and controls are designed to be keyboard-enabled. All suitable input channels (such as mouse, keyboard, or touch) are treated equally according to the capabilities of the device or the individual preferences of the user. For example, some users may prefer using the keyboard instead of a mouse, which lets them work faster.

For more information, see SAPUI5 keyboard support on SAP Help Portal.

Tab order of controls: According to the placement of controls on the screen, SAPUI5 supports keyboard navigation with a predefined tab order sequence. This includes the tab order for the floorplan, the sequence of accessing individual applications, and the navigation in the application itself. According to control containers and layout, the application needs to be designed to support this order (left-right-top-bottom for western languages, for example).

Messaging Patterns

Standard messaging patterns (busy, errors, notifications): In SAP Fiori, a message system is implemented. This ensures that system messages appear at predefined locations with a consistent design.

For more information, see Message Handing.

Screen Reader Enablement

Screen readers retrieve visible and invisible textual information, as well as structural information from the user interface, in order to provide it as speech output or braille output to the end user. The SAPUI5 framework is technically prepared for screen reader support. This means that all the structural information and texts needed are handed over to assistive technology. Nevertheless, the actual structure, as well as the actual visible and invisible texts, need to be defined at application level.

Designing Intelligent Systems

Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Usages of the Quartz Dark theme could be working at night, low-lighted factory or other environments, or working outside at night using portable devices.

Be aware that Quartz Dark does not replace high-contrast themes and supports the minimal contrast requirements of the Web Contrast Accessibility Guidelines (WCAG) 2.1.

Color Balance

Color Usage

Each theme is based on a set of individual base reference values. These are:

Primary (main user interface colors)

Secondary (accent colors)

Grayscale (neutral values)

Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Dark reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, which are then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Quartz Dark Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Accessibility

Color Contrast

Controls and colors are carefully selected to fulfill the minimum contrast requirements. Contrast ratios vary for different controls due to variations in size, weight, fill, or structure.

The minimum contrast thresholds for the standard SAP Fiori theme are as follows:

• 4.5:1 for text and icons in normal size or smaller.
• 3.0:1 for text and icons in large size (and normal size bold).
• 3.0:1 for graphical objects (like charts) as well as visual details that identify a UI element and its state.

Goals of Good Color Contrast

The user must be able to see everything that is needed to understand and operate the screen.

• Texts are readable.
• Icons are recognizable and distinguishable (unless they are purely decorative).
• UI elements can be identified visually (not by trial and error).
• Active elements can be recognized as such.
• The focus indicator can be found quickly (on a 15″ monitor, a user with good vision should find it in less than a second from a distance of 2.5 meters).
• Emphasized and selected controls are recognizable.
• Scroll indicators are recognizable.
• Groups and other structure elements can be recognized.
• All other visual information can be recognized.

For the last two points, you can also use other options to make the visual elements easier to recognize, such as layout, spacing, or additional texts.

Resources

Theming

SAP Fiori uses a variety of colors. They are mapped to control parameters, thus allowing you to overwrite them easily in the UI Theme Designer.

Quartz Light Colors

Quartz Light is the standard theme for SAP Fiori applications.

Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Color Balance

Color balance refers to the recommended mixture of light and dark, and colored and non-colored areas of any SAP Fiori app interface.

Approaching the ideal color balance for each page creates a visual rhythm throughout the application. It also helps to draw the user’s attention to the most important information and functions. Furthermore, it promotes a distinct and consistent look and feel throughout all SAP Fiori apps.

• The Quartz Light theme background colors are subtle, calm, reduced, and minimalistic.
• A reduced background color scheme ensures a stable base for any application content. Foreground colors support the importance, prominence, and visual connection of the information displayed.

Color Usage

Each theme is based on a set of individual base reference values. These are:

• Primary (main user interface colors)
• Secondary (accent colors)
• Grayscale (neutral values)
• Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Light reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, whichare then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Fiori Standard Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Foreground Colors

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Intro

This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following texts for key users and end users.

All texts are translated, except for the template ID.

For the individual texts, follow the guidelines below.

Template ID

Use

Template Name

Use

Template Description

Use

Short Description

Use

Message Details

Use

Secure Notification Details

Use

Public Notification Details

Use

Top Tips

• Don’t just re-use the template name and description for the end user message. The texts should reflect the different target groups.
  • Template descriptions take the third person
  • End-user texts address users directly
• Keep in mind the different use cases for in-app messages and notifications.
  • On the situation page in an app, the message just needs to summarize the issue. All the relevant data is on the same page. Typically, in-app message details need fewer variables.
  • Notifications initially appear out of context, so additional specifics can help users identify and evaluate the relevance of a situation. Typically, detail notification texts include key variables.
• Think carefully about how much detail you really need. Shorter texts are easier to read and allow more space for translation.
• Avoid using lists of variables without indicating what they stand for. This makes it harder for translators to understand the overall context.

Resources

SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.

Designing 72 from the ground up made it possible to meet SAP Fiori’s typographic requirements, including:

• Legibility enhancements: Optimize for screen use.
• Font styles: Support a robust typographic hierarchy.
• Brand voice: Be credible and humane.
• Character set: Accommodate complex content.
• Language support: Support Windows Glyph List.
• Accessibility: Improve character recognition.

Typography with 72

“72” replaces the default system fonts to improve the typographic system for SAP Fiori applications. The design has been meticulously crafted to portray a look and feel that is more trustworthy, friendly and modern, communicating the visual language of SAP Fiori. The metrics of the system fonts have been kept, to ensure compatibility within all controls. Improvements of the individual characters have been made, which also means that less screen width is required, resulting in reduced truncation issues. With all these enhancements, along with the humanist influences within the fine details, 72 greatly improves the legibility of SAP Fiori applications.

Language Support and Fallback to System Font

Language coverage is one of the most important requirements of a typeface, depending on the number of countries in which your applications need to be available. Beyond the languages the font supports, fallback solutions need to be considered. If the defined fonts cannot be displayed when an application initially loads, a fallback font is defined in the style sheet. Defining a fallback to a sans-serif system font that is readily available on every user’s device is a simple solution to load applications in any language. The font stack that is used within the CSS includes 72 with a fallback to system fonts such as Arial and Helvetica in combination, or Roboto for Android.

Here is an example of how theme parameters are used to specify a font stack. Notice that there are two versions of the 72 font; the first is a smaller subset to help improve performance and the second is the full version:

sapFontFamily: “72”, “72full”, Arial, Helvetica, sans-serif;

The fallback system fonts also have the advantage of zero loading time, ensuring that there is always a consistent font available that works with the fresh, clean, and minimalist SAP Fiori style. The font stack used comes with a full Unicode solution when special characters are needed. For all the languages that SAP Fiori will need to support, system fonts are available. 72 is integrated into the control set, making customization easy. The font stack can also be modified to achieve an individual result.

Accessibility

Optimized for screen consumption, 72’s design enhancements increase legibility, readability and ultimately, accessibility. A wider apex and open counters help with character recognition at smaller sizes. Differentiation of character details, such as the number “1” and the lower case “l” versus the capital “I”, makes the characters easier to distinguish and improves the overall reading experience.

Headlines and Font Styles for UI Controls

• Headlines 1 to 6: Titles are defined in several sizes and styles that help to visually identify the context of application pages or grouped content within the user interface. Examples of headlines include the page title, object header title, list, form, table, chart, timeline, and feed titles. Headlines generally use a regular font weight by default, but this is flexible depending on the control component or application context.
• Small text: Used for exceptional use cases within controls, such as time stamps or a unit of measurement. We do not recommend using small text size as the main UI text size within controls.
• Medium text: Default text size used in controls, such as buttons, inputs, tables, or a tree.
• Large text: Stand-out text controls, such as the author name in a feed, or the file name for a collection of uploaded files.
• Key performance indicators or custom display sizes: KPI numbers or custom display text sizes may have individually-specified sizes and font weights depending on the control component or application context. Consider visual accessibility and the typographic hierarchy before choosing any custom size or font weight. Light font weights are recommended only for large sizes that are clearly visible and should never be used for small textual information or labeling. If a UI is specially designed to be visible on very large displays from far away, consider emphasizing key information using a bold font weight.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Usages of the Quartz Dark theme could be working at night, low-lighted factory or other environments, or working outside at night using portable devices.

Be aware that Quartz Dark does not replace high-contrast themes and supports the minimal contrast requirements of the Web Contrast Accessibility Guidelines (WCAG) 2.1.

Color Balance

Color Usage

Each theme is based on a set of individual base reference values. These are:

Primary (main user interface colors)

Secondary (accent colors)

Grayscale (neutral values)

Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Dark reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, which are then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Quartz Dark Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Accessibility

Color Contrast

Controls and colors are carefully selected to fulfill the minimum contrast requirements. Contrast ratios vary for different controls due to variations in size, weight, fill, or structure.

The minimum contrast thresholds for the standard SAP Fiori theme are as follows:

• 4.5:1 for text and icons in normal size or smaller.
• 3.0:1 for text and icons in large size (and normal size bold).
• 3.0:1 for graphical objects (like charts) as well as visual details that identify a UI element and its state.

Goals of Good Color Contrast

The user must be able to see everything that is needed to understand and operate the screen.

• Texts are readable.
• Icons are recognizable and distinguishable (unless they are purely decorative).
• UI elements can be identified visually (not by trial and error).
• Active elements can be recognized as such.
• The focus indicator can be found quickly (on a 15″ monitor, a user with good vision should find it in less than a second from a distance of 2.5 meters).
• Emphasized and selected controls are recognizable.
• Scroll indicators are recognizable.
• Groups and other structure elements can be recognized.
• All other visual information can be recognized.

For the last two points, you can also use other options to make the visual elements easier to recognize, such as layout, spacing, or additional texts.

Resources

Theming

SAP Fiori uses a variety of colors. They are mapped to control parameters, thus allowing you to overwrite them easily in the UI Theme Designer.

Quartz Light Colors

Quartz Light is the standard theme for SAP Fiori applications.

Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Color Balance

Color balance refers to the recommended mixture of light and dark, and colored and non-colored areas of any SAP Fiori app interface.

Approaching the ideal color balance for each page creates a visual rhythm throughout the application. It also helps to draw the user’s attention to the most important information and functions. Furthermore, it promotes a distinct and consistent look and feel throughout all SAP Fiori apps.

• The Quartz Light theme background colors are subtle, calm, reduced, and minimalistic.
• A reduced background color scheme ensures a stable base for any application content. Foreground colors support the importance, prominence, and visual connection of the information displayed.

Color Usage

Each theme is based on a set of individual base reference values. These are:

• Primary (main user interface colors)
• Secondary (accent colors)
• Grayscale (neutral values)
• Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Light reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, whichare then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Fiori Standard Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Foreground Colors

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

The default theme for SAP Fiori is called SAP Quartz Light. In addition, SAP provides alternative themes: SAP Quartz Dark, SAP Belize, SAP Belize Deep, and the accessibility themes SAP High-Contrast Black (HCB) and SAP High-Contrast White (HCW).

SAP Fiori Themes

SAP Fiori High Contrast Themes

All the controls are styled using CSS, and the LESS-based theme parameters come in the form of CSS variables, SASS and JSON. This enables customers to apply their own brand identity to the user interface using the UI theme designer, which works across all SAP UI technologies. It allows customers to easily change a few basic colors (quick theming) as well individual control colors (detailed theming). We recommend using SAP Quartz Light as a basis for altering the colors as the minimalist design serves as an ideal starting point.

Concept

From Quick Theming to Detailed Control Theming

Theming is driven by customer requirements and works using a top down approach, from quick to detailed UI control adaptations:

• Quick theming: replacing logo and main brand colors
• Detailed theming: replacing detailed color values of specific UI controls

Quick Theming

Customers can easily change the logo and a few colors in the UI by replacing the colors in the UI theme designer. This automatically creates a recalculated tonal color palette that is applied to various UI elements, creating a harmonious look and feel.

One of the main parts of a corporate branding guide is a set of primary and secondary branding colors. When creating a custom theme, these colors can simply be added to the custom palette of the UI theme designer, making it easy to replace the default SAP Fiori colors.

The following example shows a combination of quick theming changes with some detailed parameter adaptations to the shell header and background image and gradient.

Detailed Theming

All of the main brand colors used for quick theming are also interlinked within the controls. Quick theming parameters like the brand color are connected to individual control parameters, such as emphasized and standard button and icon texts. They can even be connected to interaction states, such as the selected and active state colors. Other quick theming parameters like the base color are connected to cards, lists, and table backgrounds.

The concept of semantic theming is to organize connected control parameters into groups, determined by what they affect and how they are related to each other. This makes it easier to choose the parameter responsible for a desired outcome and better gauge the results of changing it. Users are not simply changing colors in the UI, but rather are determining how specific colors are used. For example, all of the theme parameters for input controls (input field, radio button, checkbox, and so on) have been grouped together and contain the word “field“. Similarly, all the color parameters for all types of buttons, menus, and tokens (background, borders, and so on) have been grouped together and contain the word “button“.

Theme parameters are set for each semantically named part of the control. These control parameters remain stable and do not change from theme to theme. Each theme has specific color values that are linked into these control parameters.

Button Example

The image below only shows a selection of button control examples. You can preview and modify all the detailed control parameters with the UI theme designer.

“Field” Control Examples

Field parameters apply to several input controls, such as input fields, combo boxes, and so on. Changing any of these parameters can affect many or all of these controls.

The image below only shows a selection of input control examples. You can preview and modify all the detailed control parameters with the UI theme designer.

Resources

SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted, hand-hinted, and aligned in font format. The icons are essentially vector graphics that can be resized easily without compromising their appearance.

Design Language

The design language for icons used within SAP products is created to work across all supported browsers, devices and operating systems. The style can be described as:

• Simple
• Fresh
• Serious
• Neutral

This approach is meant to communicate the simplicity, sophistication, and integrity represented by SAP solutions. The style integrates basic geometric shapes in order to give a more prominent appearance.

Icon Formats

Icons can be supported in multiple file formats. However, SAP delivers icons as font format by default. The SAP icon font contains multiple icons in one file with small file size and allows the convenience of updates that can be delivered with each SAP product release. Custom icons can even replace the SAP icon font if an alternative format or style is desired. Additional icon font files can also be added to the SAPUI5 icon pool.

For more information on custom icons, see OpenUI5 development information.

SAP icons are also part of the theming base content, which is available for all SAP-supported technologies.

Icon Semantics

The Geometric Icon Grid System

A Closer Look at 16px Icons

A Closer Look at 32px Icons

Arrow Styles – Thin

Arrow Styles – Emphasized

Border Radius – Regular

Border Radius – Emphasized

SAP Icon Font

To ensure availability of SAP icons for all SAP-supported technologies, the icons are part of the theming base content and also as part of OpenUI5. The SAP icon font is made available under the Apache 2.0 license.

Resources

Follow the links below to find out more about iconography.

The default theme for SAP Fiori is called SAP Quartz Light. In addition, SAP provides alternative themes: SAP Quartz Dark, SAP Belize, SAP Belize Deep, and the accessibility themes SAP High-Contrast Black (HCB) and SAP High-Contrast White (HCW).

SAP Fiori Themes

SAP Fiori High Contrast Themes

All the controls are styled using CSS, and the LESS-based theme parameters come in the form of CSS variables, SASS and JSON. This enables customers to apply their own brand identity to the user interface using the UI theme designer, which works across all SAP UI technologies. It allows customers to easily change a few basic colors (quick theming) as well individual control colors (detailed theming). We recommend using SAP Quartz Light as a basis for altering the colors as the minimalist design serves as an ideal starting point.

Concept

From Quick Theming to Detailed Control Theming

Theming is driven by customer requirements and works using a top down approach, from quick to detailed UI control adaptations:

• Quick theming: replacing logo and main brand colors
• Detailed theming: replacing detailed color values of specific UI controls

Quick Theming

Customers can easily change the logo and a few colors in the UI by replacing the colors in the UI theme designer. This automatically creates a recalculated tonal color palette that is applied to various UI elements, creating a harmonious look and feel.

One of the main parts of a corporate branding guide is a set of primary and secondary branding colors. When creating a custom theme, these colors can simply be added to the custom palette of the UI theme designer, making it easy to replace the default SAP Fiori colors.

The following example shows a combination of quick theming changes with some detailed parameter adaptations to the shell header and background image and gradient.

Detailed Theming

All of the main brand colors used for quick theming are also interlinked within the controls. Quick theming parameters like the brand color are connected to individual control parameters, such as emphasized and standard button and icon texts. They can even be connected to interaction states, such as the selected and active state colors. Other quick theming parameters like the base color are connected to cards, lists, and table backgrounds.

The concept of semantic theming is to organize connected control parameters into groups, determined by what they affect and how they are related to each other. This makes it easier to choose the parameter responsible for a desired outcome and better gauge the results of changing it. Users are not simply changing colors in the UI, but rather are determining how specific colors are used. For example, all of the theme parameters for input controls (input field, radio button, checkbox, and so on) have been grouped together and contain the word “field“. Similarly, all the color parameters for all types of buttons, menus, and tokens (background, borders, and so on) have been grouped together and contain the word “button“.

Theme parameters are set for each semantically named part of the control. These control parameters remain stable and do not change from theme to theme. Each theme has specific color values that are linked into these control parameters.

Button Example

The image below only shows a selection of button control examples. You can preview and modify all the detailed control parameters with the UI theme designer.

“Field” Control Examples

Field parameters apply to several input controls, such as input fields, combo boxes, and so on. Changing any of these parameters can affect many or all of these controls.

The image below only shows a selection of input control examples. You can preview and modify all the detailed control parameters with the UI theme designer.

Resources

Accessibility Provided at Framework Level

Visualization

Minimum contrast: Following the requirements of the international Web Content Accessibility Guidelines WCAG 2.1 (see References), SAP Fiori’s default theme was designed to fulfill the requirements for minimum color contrast. In addition, we provide high-contrast themes that support the required contrast ratio of 7:1 for texts. They can be chosen in the user settings. The individual theme choice is saved as a preference until the user changes it again.

More information:

• Theming
• High Contrast Black Theme for SAPUI5 (SAP Help Portal)

Consistency of icons: A comprehensive icon library ensures consistent icon usage within a product and also across products. The icon library includes predefined descriptions. This enables the development teams not only to use consistent icons, but also to implement meaningful descriptions for tooltips as a textual alternative for graphical representation. However, in some cases you may need to adapt these descriptions to the specific use case.

For more information, see Iconography.

Keyboard focus visualization design: Focus visualization is very important for user efficiency. SAP Fiori uses a contrast ratio that makes the current focus stand out in all themes.

Layout adaptation for different devices: Since SAP Fiori can run on various devices, it comes with a responsive layout that adapts to the display resolution parameters of the individual device.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

Support for text resizing: Users can adjust the font size themselves using the browser zoom. The responsive layout adapts to these manual adjustments automatically.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

Keyboard

Keyboard navigation and control interaction: All standard UI elements and controls are designed to be keyboard-enabled. All suitable input channels (such as mouse, keyboard, or touch) are treated equally according to the capabilities of the device or the individual preferences of the user. For example, some users may prefer using the keyboard instead of a mouse, which lets them work faster.

For more information, see SAPUI5 keyboard support on SAP Help Portal.

Tab order of controls: According to the placement of controls on the screen, SAPUI5 supports keyboard navigation with a predefined tab order sequence. This includes the tab order for the floorplan, the sequence of accessing individual applications, and the navigation in the application itself. According to control containers and layout, the application needs to be designed to support this order (left-right-top-bottom for western languages, for example).

Messaging

Standard messaging patterns (busy, errors, notifications): In SAP Fiori, a message system is implemented. This ensures that system messages appear at predefined locations with a consistent design.

For more information, see Message Handing.

Intro

This guideline applies for the standard situation templates in the SAP S/4HANA situation handling framework. For each standard template, you need to define the following texts for key users and end users.

All texts are translated, except for the template ID.

For the individual texts, follow the guidelines below.

Template ID

Template Name

Template Description

Short Description

Message Details