Accessibility & Fiori – High Contrast Black theme

Imagine you are sitting quietly at the back of a large presentation theatre at a conference, Teched for instance.  The presenters are far away at the front of the room, and the whole theatre is in night-black darkness so that everyone can see what’s happening at the front.  You’ve been there for almost an hour, and your eyes have adjusted to the gloom.

Suddenly the person next to you pulls out their smartphone and its bright white screen springs to life. All around you people are making howls of protest, and you are so blinded by the light you have to avert your eyes for a second. When you glance back, you try to see the screen to see what could be so important that it couldn’t wait until the end of the presentation. You have to squint, and even then you can barely make out any of the symbols on the screen. And now your head is starting to ache.

You’ve just experienced a tiny taste of what it is to be light sensitive. And you’ve discovered why people need High Contrast Black theme.

What is High Contrast Black Theme

The High-Contrast Black (HCB) theme for SAPUI5 controls is a predefined theme that supports people with visual impairments, especially those with light sensitivity.  It’s one of the many features that are needed to provide digital Accessibility for all.  Like most Accessibility features, High Contrast Black benefits not just those who can’t work without it, it makes for a better user experience for everyone.

What does High Contrast Black look like?  Compare these screens. Here’s the Fiori Launchpad with the standard sap_bluecrystal theme followed by the High Contrast Black equivalent.

And here’s one of the standard Fiori apps, My Inbox, in the default sap_bluecrystal theme followed by the High Contrast Black theme.

You might notice that it’s not just the colours that have been changed, the font size has been adjusted slightly as well. More about that later.

It’s also worth knowing that International Accessibility standards –  (for the United States of America) US-508, (for Germany) BITV 2.0, (for rest of the world) WCAG 2.0 AA + AAA – require not only options to adjust colour and contrast settings, but also certain minimum contrast ratios between foreground (text) and background colours.  These minimum contrast ratios have already been considered and checked in the SAP High Contrast Black theme.

Who really needs this

High Contrast Black helps users who are extremely light sensitive (also known as Photophobia) and also many users with severe visual impairments, as it enables them to see the text and UI elements better and faster. 

Photophobia, or light sensitivity, is an intolerance of light. Sources such as sunlight, fluorescent light and incandescent light all can cause discomfort, along with a need to squint or close your eyes. Headaches also often accompany light sensitivity. The degree of light sensitivity varies – some people are only bothered by bright lights, for others almost any light is irritating.  Light sensitivity is a part of a variety of conditions such as conjunctivitis, corneal abrasions, detached retina, refractive surgery, albinism, colour blindness, and some people are just unlucky enough to be born with enlarged pupils.

Now think about most user interfaces you see on your smartphone, tablet, laptop, desktop or other device.  Often these user interfaces are primarily dark text on a light background. For people with light sensitivity, looking at a screen which is mostly light feels something like staring into a dazzling spotlight.  It can physically hurt, and it’s hard to make out anything much on the screen.

But there’s an answer – provide an option to set the screen to mostly dark background with light text. In other words, we need a theme. SAP Fiori provides the standard High Contrast Black theme for this purpose.  In fact, SAP has a long history of providing accessible software in its user interface technologies, and even as far back as SAPGUI, the High Contrast Black theme was well known.

Who else can benefit from High Contrast Black theme

Just about everybody at some time or another.  Ever had to work after a hard night out? Or after staying up half the night with a crying child?  Or suffering a bad headache or migraine?  Or just suffering from eye strain from looking at too many screens all day? Temporary light sensitivity can also be caused by a variety of temporary conditions such as contact lens irritation, sunburn, and certain medications.

Statistics on people suffering light sensitivity vary widely.  One of the standout statistics where light sensitivity is a factor is digital eye strain, also known as Computer Vision Syndrome (CVS), from spending too much time looking at computer screens.  In their 2015 Digital Eye Strain report the Vision Council of America estimates over 60% of all American adults suffer from it.  And its estimated that people who spend more than 2 hours per day in front of digital screens have a 90% likelihood of suffering from it.

So before you turn off your screen…  one of the ways to minimize eye strain is to adjust the colour and contrast of your display.

Now at this point some of you may have heard of colour inversion settings that are often provided as part of device and browser settings.  So why don’t we just use those? Colour inversion settings don’t necessarily provide optimal readability – it’s not sufficient to just adjust the colour only, font size and contrast needs to be adjusted as well.  Not to mention the results of colour inversion can be a little bizarre.  Here’s the Fiori My Inbox screen using Google Chrome colour inversion … blue turns to orange and various browns; the dark footer becomes an undesirably light footer; and the bright green Approve and red Reject buttons take on some very unexpected hues. 

As an end user, how do I turn on the High Contrast Black theme

It’s as simple as choosing the theme in your user preferences.

Or if you launch your app via a URL, just add the parameter sap-ui-theme=sap_hcb

As a developer, how do I include this in my custom Fiori app

The good news for Fiori (SAPUI5) developers is most of the time there’s really nothing much you need to do…except permit your users to choose the High Contrast Black theme by making sure it’s one of the supported themes for your app.

It’s a good idea to include High Contrast Black “sap_hcb” in the list of supported themes area of your App Descriptor file, e.g.

  “sap.ui”: {

  “_version”: “1.1.0”,

  “technology”: “UI5”,

  “deviceTypes”: {

   “desktop”: true,

   “tablet”: true,

   “phone”: true

  },

  “supportedThemes”: [

   “sap_bluecrystal”,

   “sap_hcb”

  ] }

It’s worth knowing you can deliberately adjust the theme on the fly using the JavaScript API, e.g. if you want to provide a specific control to switch themes rather than using user preferences.

sap.ui.getCore().applyTheme(“sap_hcb”)

It pays to be considerate in your choice of SAPUI5 libraries. These are the SAPUI5 libraries that support High Contrast Black:

• sap.m
• sap.me
• sap.ui.commons
• sap.ui.comp
• sap.ui.layout
• sap.ui.suite
• sap.ui.table
• sap.ui.unified
• sap.ui.ux3
• sap.viz

Don’t forget to consider the images you are using as well.  You might notice in the screeenshot of the FioriLaunchpad with High Contrast Black the customize and extend is an image which remains bright white, so perhaps try to limit the number of bright images on any one screen.

Finally you can also provide links to your app with the High Contrast Black theme preset by setting the parameter sap-ui-theme=sap_hcb

And lastly… one from the left field

Next time you go to conference, wouldn’t it be great if your annoying neighbour’s device used it’s ambient light sensor to automatically set an appropriate theme? I posed this challenge to a colleague, Thorsten Frietag (of IoT toy train fame), and he managed to get an example up and running in under an hour in a specific browser.  However what we did discover was that currently the limiting factor is not Fiori, but the availability of APIs for ambient light sensors on many devices. Something both Google and Microsoft are working on – so maybe we’ll be able to use those sorts of smarts at next year’s Teched?

Interested in more about Accessibility?

More blogs on accessibility and user experience published by members of SAP’s dedicated Accessibility team can be found on experience.sap.com including:

Accessibility and User Experience

Accessible Rich Internet Applications ARIA Part 1: Introduction

Accessible Rich Internet Applications ARIA Part 2: ARIA

For a general discussion of accessibility and the design implications Accessibility #GAAD & Fiori – Beyond High Contrast Black

Be aware that:

• As of Build 1.28 Fiori provides Keyboard Handling
• As of Build 1.30 Fiori provides support for Screen Readers

“Light Bulb” Image courtesy of Naypong at FreeDigitalPhotos.net

Other images were taken from screenshots using http://sapfioritrial.com