Skip to Content

Some time ago I discussed SAP High Contrast Black, a theme that SAP has been providing in many solutions for decades.  A matching SAP High Contrast White has been long desired and with SAPUI5 version 1.48 has finally become a reality.  This blog brings you a first glance at High Contrast White and how it impacts your Fiori Launchpad and Fiori apps.

High Contrast White is an important new theme for anyone working on mobile devices in bright environments where there is dazzling and glare, such as on a mining site, or on a farm, or in city park, or on a container wharf.   

High Contrast White also helps anyone who find higher contrast helps them to see more details, such as people with severe short-sightedness, macular degeneration, glaucoma, and floaters/clouds in the eye. While these sorts of conditions can affect anyone at any age, they are particularly prevalent as we age.  So you may find your mature talent employees (over 45 years of age) may be particularly appreciative of a high contrast screen.

SAP High Contrast White is one of SAP’s newest addition to the Fiori Design Guidelines for accessibility users.  SAP High Contrast White is available for all Fiori and SAPUI5 apps in SAPUI5 and OPENUI5 as of version 1.48.

Fiori Launchpad in High Contrast White

Given that version 1.48 has only been released very recently most customers are yet to upgrade to SAPUI5 1.48, so the easiest place you can see this is in the recently released SAP S/4HANA 1709 and also in SAP S/4HANA Cloud 1708.

In this blog you will see some brief examples of:

  • High Contrast White in the Fiori Launchpad
  • High Contrast White in Fiori apps

And you will also find out how you can set select this theme:

  • Setting High Contrast White as a user
  • Setting High Contrast White as a developer

The screenshots you will see are taken from S/4HANA 1709.

High Contrast White in the Fiori Launchpad

In the Fiori Launchpad, you can see in this example primarily white tiles are shown with a black border.The currently selected tab appears as a mid-blue.

Fiori Launchpad in High Contrast White showing analytical tiles

The focus indicator that shows you where the cursor is currently placed appears as black dotted line on white (to make it easier to see the cursor indicator is also 2 pixels wide rather than the usual 1 pixel used for Belize and Belize Deep).  In the example below, you can see the cursor indicator on the Unused Contracts tile.

Cursor Indicator in High Contrast White

Notice that semantic colors on analytics tiles still apply, and are just subtly adjusted shades.

Greens are #006362 (0% red, 38.8% green, 38.4% blue) compared to Belize’s #2B7D2B (16.9% red, 49% green and 16.9% blue). Reds are #AB0000 (67% red) compared to Belize’s #BB0000 (73% red).

Naturally the colors of your corporate logo and any other images are unaffected.

On static tiles, you can see icons are in minimalist black on white, as in the following example.

Fiori Launchpad static tiles in High Contrast White

High Contrast White in Fiori apps

In the example below you can see high contrast white applied to one of the S/4HANA Fiori Manage apps.  This particular app, like many of the Manage apps, uses the popular List Report floorplan.  Here we see the list shown with a grid table.  Once again you can see minimalist black text and lines on primarily white screen. The position of the cursor is highlighted in orange – here we see the cursor selecting a whole row to expand it to see more details.

Fiori Manage App in High Contrast White

Often details are shown using an Object Page – another very common Fiori floorplan.  On an object page again you can see High Contrast White appears as black text on primarily white screen.  The current tab is emphasized with a bold underline. Major section (aka facet) headings have a grey background.

Thumbnail images are unaffected.

Fiori Object Page in High Contrast White

In analytical charts, a deep color palette is applied to make comparison of charts and lines clearer, and a little more interesting.

This new color palette is particularly obvious on Overview Pages.

Setting High Contrast White as a User

It’s easy to turn on this new theme.  Just to go to the Me Area of your Fiori Launchpad and open the Settings dialog. You’ll find the settings for themes in the section Appearance.  Simply choose SAP High Contrast White.

Fiori Launchpad Settings showing Theme selection

Hint: You might notice there are 2 SAP High Contrast Blacks.  The older sap_hcb (marked with an artist pallet icon) and the newer sap_belize_hcb (showing the theme background colour in a circle icon).  You are recommended to use the updated sap_belize_hcb for Fiori to pick up on the latest Fiori settings and to smoothly navigate to classic UIs.

Setting High Contrast White as a Developer or Administrator

You can switch on the High Contrast White theme by appending the URL parameter to your Fiori Launchpad URL:

sap-ui-theme=sap_belize_hcw

And of course, just like High Contrast Black you can add sap_belize_hcw as a supported theme in your manifest.json file.

Becoming a SAP Fiori Accessibility guru

You’ll find more in the SAP Fiori Accessibility wiki.

Screenshots from S/4HANA 1709

Brought to you by the SAP S/4HANA RIG

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

    1. Jocelyn Dart Post author

      Hi GV,

      I’ve sent you a message in messages.sap.com.

      Appreciate your frustration.  If you have trouble reaching that or reaching anyone in the community you could also talk to community support.

      Rgds,

      Jocelyn

      (1) 

Leave a Reply