Contrast is one of the most important principles in design. There are different kinds of contrasts: contrast between shapes, sizes, positions, and colors. Good and meaningful color contrast, the relationship of foreground and background color, improves usability for everybody. Find out below how color contrast in SAP Fiori supports users to perform their tasks easily. But first, quickly watch the short intro about color contrast in SAP Fiori.
#1 Beyond beautifying
When you open your SAP Fiori Launchpad in the SAP Belize theme, you see different shades of blue and grey. SAP Fiori’s minimal use of color creates a clear and harmonic style throughout the apps.
In the graphic below you see the recommended mixture of light and dark, colored and non-colored areas for any SAP Fiori user interface. Colors do not only need to look good, they also need to work well with each other. This is where color contrast comes into play.
#2 Contrast is measurable
To define contrast, the ratio in luminosity – the grey scale – of two colors is measured. The highest contrast ratio is between black and white, 21:1. A ratio of 1:1 describes a contrast of color against itself and means no contrast at all.
In a user interface, there are numerous cases, where color contrast needs to be considered:
- Text color against background color
- Form of a UI element against background color
- Color of an icon against its background
- Selection color of a UI element against background color, etc.
Color contrast can easily by measured with any color contrast measuring tool. Since character pixels of a font might contain several color values to improve visibility, you need to measure pixels at the extreme.
Be careful when choosing colors regarding contrasts and test them with a measuring tool. Some colors might look very different, yet have a low contrast. For example, avoid using red on green and vice versa. Although red and green colors are different colors, they almost do not contrast with each other since they have almost the same gray scale level. The combination of them as foreground and background color would not be distinguishable for people with red-green blindness. Below, you can see a red green combination as well as red and green in gray scales.
In general, it is recommended to use not only colors as information, but to add different shapes, iconography, and text to ensure accessibility for all.
In the following example, you can see how color coding and icons transmit the same information. In this way, understanding is independent of recognizing color.
#3 Contrast from an accessibility perspective
The higher the contrast, the higher is the readability: working in a bright environment requires good contrast. This is crucial for mobile apps since they are used under a wide range of light conditions. Also, aging eyes might be more sensitive to light and need higher contrast to distinguish colors. And, for some users, insufficient contrast may mean losing information on the screen.
The W3C Web Content Accessibility Guidelines 2.0 define contrast ratios that need to be met in order to comply at particular levels. For normal text in the default theme the contrast value should not be less than 4.5:1. For bigger text and other elements with bigger area the contrast value of 3:1 would be sufficient.
The graphic below shows you some contrast ratios on an SAP Fiori Belize screen, where button labels have a halo effect to increase the contrast.
#4 Contrast has many faces
In SAP Fiori, one element can show different status by changing color. In the animation below, you can see a standard button in different interaction states: regular, hover, pressed and disabled. When you hover over this button, the grey background is a bit darker while the blue icon color stays the same. If the button is activated, the background of the button turns blue whereas the icon color turns white. A disabled button is faded out.
For a pressed state of a button besides creating depth, contrast against the color of a default state also provides feedback to the user´s actions.
In standard SAP Fiori themes, colors are aligned with each other to ensure sufficient contrast. To summarize, the advantages of using standard controls of SAP Fiori: You do not have to care about the contrast of numerous color parameters of different UI elements in their different interaction states, also when switching between different themes.
#5 Predefined themes – High contrast, low effort
Using one simplified code line, SAP Fiori applications can work with multiple themes. Besides its standard Belize theme and Belize Deep, SAP Fiori offers High Contrast Black (HCB) and High Contrast White (HCW) to support readability in light sensitive situations.
In HCB, the background of the user interface is primarily black. The foreground elements, such as text, icons, and the outline of UI elements, are primarily white. In HCW, the canvas and standard fill color is white, whereas foreground elements are black. Also, semantic colors have been adapted considering contrast as you can see in the graphic below.
When using standard UI5 controls, all parameters for controls are adjusted to the SAP Fiori themes to provide good contrast.
#6 Make SAP Fiori your Fiori – but be careful
Depending on the UI client and/or UI framework, SAP Fiori’s standard themes can be used or adapted to specific needs through UI tools such as UI Theme Designer, for example, if you would like to apply branding colors of your company. On the left side of the screenshot, you can see the theme which serves as a basis. There, you select the controls that you would like to adapt. On the right is a panel with color parameters that can easily be changed.
However, still test the color combinations in different contexts to make sure the contrast is sufficient.
To sum up, here are the main takeaways:
- If you use SAP Fiori standard controls, you are on the safe side: They are already aligned for sufficient color contrast.
- If you customize colors or create custom controls, check the color contrast in different contexts.
- Do not hard code the colors for color parameters – they might become hard to read or even invisible in different contexts.
Would you like to learn more about accessibility in SAP Fiori? Have a look at SAP Fiori and accessibility: Our Top 7.
- SAP Managed Tags:
