New High Contrast Black Theme in SAP GUI for Windows 7.20

By Josef Köble, Architecture Governance and Standards, SAP AG – March 9, 2012

 

Introduction

SAP has designed a new High Contrast Black theme which has been implemented in SAP GUI for Windows, an SAP-specific graphical user interface (GUI) that runs on the Windows operating system. SAP GUI for Windows includes different themes, such as, the Classic Theme, the Enjoy Theme, or the SAP Signature Theme. The new High Contrast Black theme is part of the SAP Signature Theme in SAP GUI for Windows 7.20.

This article gives some general information about High Contrast Black and explores the new High Contrast Black theme for SAP GUI for Windows in detail. It describes which principles have been considered in the design of this new High Contrast Black theme and how it can be activated.

 

Motivation

When looking at your screen, you will probably see the user interface with a white background and mainly black characters and lines on it. Users who have extreme light sensitivity or photophobia will experience difficulties with this kind of view. For these users, looking at a screen display with a white background feels like looking into a dazzling spotlight, and they will have difficulty in recognizing any details on the screen. Such users usually prefer a screen display with a dark background color with bright characters and lines on it. In fact, these users do not simply "prefer" a screen display with dark background but actually require it in order to see the details on the screen.

 

What is High Contrast Black?

The most well-known screen view with dark background and white characters is the High Contrast Black view. This view has the following characteristics:

  • The background of the user interface is primarily black.
  • The foreground elements of user interfaces are primarily white.

Foreground elements include

  • Text (characters)
  • Images of text
  • Outline of UI elements
  • Outline of icons
  • Outline of focus

The Outline includes the shape as well as the characteristic lines.

Based on our extensive research, the SAP Accessibility Competence Center has come to the conclusion that the High Contrast Black display is favored among visually impaired users who have to adjust the colors of the user interface to their own needs. The High Contrast Black view is not only used by users who are extremely light-sensitive but also by many users with severe visual impairments, as it enables them to see the text and UI elements better and faster.

There are three fundamental methods to obtain a view with a black background and white foreground. The first is to modify the single colors in the (default) theme, the second is to select a predefined High Contrast Black theme, and the third is to use color inversion. The first and second methods can also be combined.

In Microsoft® Windows 7, users can switch to High Contrast Black via the Control Panel by choosing Personalization and selecting the High Contrast Black theme. After selecting the High Contrast Black theme, the desktop and its elements changes its view into a black background and a white foreground. Based on their specific color management, some applications will follow this switch and some not.

 

High Contrast Black View for SAP Signature Theme

SAP Signature Theme of SAP GUI for Windows is now also available in High Contrast Black view. SAP Signature theme uses a theme of its own with well-defined colors for the SAP GUI for the Windows user interface. To enable High Contrast Black view in SAP Signature theme, SAP has designed a new High Contrast Black theme and included it in SAP GUI for Windows 7.20. There are many reasons why it makes sense to implement an own High Contrast Black theme for SAP Signature theme, instead of using the colors of the Windows Operating System:

  • SAP GUI for Windows uses own UI elements. Some UI elements of SAP GUI for Windows need more specified user interface colors than the Windows Operating System offers for UI elements.
  • A specified High Contrast Black theme for SAP Signature theme causes fewer color conflicts on the user interface.
  • It is easier for users to select a specified High Contrast Black theme than to adjust colors in different settings.

When we designed the High Contrast Black theme, we considered the enhanced contrast requirement of the Web Content Accessibility Guidelines (WCAG) 2.0:

Success Criterion 1.4.6 of WCAG:

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Source: http://www.w3.org/TR/WCAG/

We also considered the following aspects for the High Contrast Black theme:

  • The High Contrast Black theme has to be consistent (no bright background spaces).
  • Foreground is not only text and images of text, but also
    outline of UI elements, outline of icons, and outline of focus.
  • The minimum contrast ratio between selection background to black background is 2.5:1.
  • Although there are different kinds of color blindness like protanopia (red blindness), deuteranopia (green blindness), tritanopia (blue blindness), or monochromaticity (full color blindness), we wanted to create a design suitable for them all. This meant that we had to find and use well-defined colors for the High Contrast Black theme.

A big challenge in designing a High Contrast Black theme was to find good background colors for different kinds of selection. While it might appear easy to set the background to black and the foreground to white, it is in fact difficult to find background colors for selection that meet a contrast ratio of 7:1 to white foreground and 2.5:1 to surrounding black background while at the same time serving all kinds of color deficiencies. After intensive exploration we chose the following colors:

 

 

The number stands for the RGB values in hexadecimals. These three colors look a little "dirty" with the advantage being that they differ in red, green, and blue values and can therefore be recognized by people with protanopia, deuteranopia, and tritanopia. These colors are used in SAP GUI for Windows as background colors in different contexts:

  • #0F5D94 – Blue: Mainly used to visualize a primary selection
  • #7A5100 – Orange-brown: Mainly used to visualize a secondary selection
  • #585858 – Neutral gray: Mainly used in disabled or read-only areas

The following screenshot shows a table with different background colors. The focused field has a black background and white characters so that it can be perceived best by the user.

 

Description: SAPGUI720_ALVGridControl.png

 

The next screenshot shows read-only fields with neutral gray (#585858). It also shows the hover color for mouse over on a button.

 

Description: SAPGUI720_PusButtons.png

 

 

How Do I Activate this High Contrast Black Theme?

One way to get this High Contrast Black theme in SAP GUI for Windows is the following:

  1. In Windows 7 choose Start > Programs > SAP Front End > SAP GUI Configuration.
  2. Select theme SAP Signature Theme.
  3. Choose Visual Design > Theme Preview / Settings.
  4. Select Activate high contrast theme and choose OK-Button.
  5. Close all open Windows of SAP GUI for Windows and restart SAP GUI for Windows.

 

Summary

SAP GUI for Windows 7.20 comes with a High Contrast Black theme of its own for the SAP Signature theme. Users can activate it in the SAP GUI Configuration. We expect that this High Contrast Black theme will be of great benefit to those users who need it. Feedback is welcome and can be sent to accessibility@sap.com.

 

top top