Skip to Content

ID-100296181.jpg

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.

FioriLaunchPadDefaultTheme.JPG

FioriLaunchPadHCBTheme.JPG

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

FioriInboxDefaultTheme.JPG

FioriInboxHCBTheme.JPG

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. 

FioriInboxColourInverted.JPG

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.

Theme selection in Fiori user preferences.JPG

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

To report this post you need to login first.

11 Comments

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

  1. Simon Kemp

    Great post Jocelyn.

    I like how you really put me into the shoes of someone who suffers from light sensitivity. Walking in the shoes of our users is a key part to good UX Design. Also nice thinking on the ambient light sensor to detect and change the theme based on the current context/setting… another great UX Design principle (consider the context of the user).

    Glad to see screen reader support available in 1.30

    Cheers,

    Simon

    P.s. on a side note it is disappointing to see that after over 500 views (563 as I write this) only I have taken the time to comment and rate your post. Whatever happened to “paying it forward” 🙁 Pay it Forward. Pay it Back!

    (0) 
    1. Jocelyn Dart Post author

      Hi Simon,

      Thanks for your feedback – appreciate you taking the time.

      Unfortunately I think too many people still accessibility as something to worry about when they are explicitly asked for it, instead of recognizing that:

      • Legally companies and especially public sector organizations are required to provide it… and in fact can be and are sued if they don’t.
      • Accessibility improves the UX for all
      • Accessibility basics are generally easy to include in the original project, and like most refactors, can be a pain to include later… as you may need to change the experience for everyone  e.g. if you’ve used a control that doesn’t support accessibility
      • Worse can be extremely costly to do later… the “get out of jail free” card is to provide a completely separate alternative just for accessibility users.  We had to do that on one project and it was much the same as redoing a whole major section of the project.

      The message that we need to get across is that Accessibility improves the user experience for everyone and that’s the journey that we need to take both designers and developers on to understand the importance of including these features as a matter of habit, rather than only on special request.

      The aim of these blogs is to try to not only make the case for considering accessibility but to help designers and developers understand what’s involved in making it happen.

      (0) 
    1. Jocelyn Dart Post author

      Thanks Jeremy! Appreciated. 

      SAP impacts so many people’s lives – want Fiori to be a positive impact – not just easier/simpler but actually better for all. 

      Coincidentally last night was watching Graeme Innes – a visually impaired lawyer who advocates for people with disabilities describe the failure to include accessibility as “the soft bigotry of low expectations”.  Including accessibility basics like this should be a no-brainer. 

      Such a small amount of effort to give a better UX for everyone.

      (0) 
  2. Hadi Azar

    I’d like to change the SAP logo to our client’s logo in the sap_hcb theme but it does not have the same options as the other themes. Is this normal?

    Has anyone been able to modify the logo in that particular theme?

    Thanks!

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
      1. Jocelyn Dart Post author

        Thanks Mike.. Hadi – please do raise the question.

        There are some restrictions and these are deliberate (otherwise the value of High Contrast Black would be lost).

        (0) 
  3. Chris White

    Jocelyn, it would be great if you can post a video navigating the SAP Fiori Launchpad using NVDA/JAWS and with your monitor switched off…

    May be you never notice but pre FES3.0, users cannot even Tab through the application, even if they use the Arrow Keys  to traverse the application nothing is announced by the screen readers, because the tiles don’t have the required attributes (accessibility related) and Divs are set to tabindex -1.

    If you are using a specific version of screen reader, that actually reads the HTML correctly please write another Blog about it and the world will appreciate it. Most screen readers seem to interfere with Keyboard Event handling.

    Do your blogs mean UI5 applications are accessible but Fiori Launchpad is not?

     

     

     

    (0) 

Leave a Reply