Windows High Contrast Mode Exploration - SAP/fundamental-styles GitHub Wiki

Implications for Fiori 3 High Contrast Themes

The Fiori 3 design specification supports a High Contrast Black and High Contrast White theme. See https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2144577961.

However, when a Windows High Contrast Mode user opens any SAP site or app on the web, the underlying SAP theme (high contrast or otherwise) will not matter as it (i.e. the styles) would be replaced by the native high contrast settings with a limited color palette configure by the user at the OS level (see next section). Hence, if we plan to support this mode, we have to make sure that all the SAP UI5 designs (high contrast or otherwise) comply with the minimum required accessibility standards and follow the best practices for HCM, proposed here. We should plan to support this mode since expecting the user to disable native Windows HCM when using SAP products and using the SAP Theme instead is not optimal. If we do not want to support Windows HCM, we may also figure out if there is a way to

Know if Windows HCM is enabled in the browsers
Skip the Windows HCM for SAP website/web app pages
Apply Fiori 3 HCM themes instead.

The above would be analogous to how apps support 'Dark Mode' and switch to 'Dark Mode' if it is applied at an os level in macOS.

Windows High Contrast Mode

We tested the state of fundamental-styles (v0.8.1) components found here, in Internet Explorer (v11.778.18362.0) with Windows High Contrast Mode (HCM) enabled (Alt + Left Shift + Print Screen). For consistency, we checked with the default High Contrast Black theme.

Screenshot of Windows High Contrast Mode Settings Screen

macOS High Contrast Mode

The high-contrast mode in macOS does not alter the style of webpages in any of the browsers, hence we have not tested this in macOS HCM. macOS has an 'inverted colors' mode which simply inverts the colors on the display hence below criteria is expected to be satisfied as is. Using Edge (Chromium-based) on macOS does not bring the native Windows HCM features with it.

Testing Windows High Contrast Mode without Windows

A number of CSS files have been provided when running Storybook in development mode to simulate Windows High Contrast Mode. These can be accessed by using the "CSS resources" addon in Storybook and selecting the desired file corresponding to the theme you wish to test (windows-hcm-1.css, windows-hcm-2.css, windows-hcm-black.css, windows-hcm-white.css).

Proposed criteria and accessibility best practices

We checked for the following criteria for high contrast mode (source):

Minimum contrast requirements (AAA Compliance) for text are met
All elements are still visible, i.e. no loss of critical controls and information
Focus states of all elements/controls are clearly visible
Readability of text in all links, buttons, and controls isn't affected
Images - including icons, should not change the information they convey

Findings

Buttons

Design Types

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between a ghost, positive, negative, attention, and positive buttons because they rely solely on color. This qualifies as a loss of information.

Screenshot of Fundamental Styles button types

Screenshot of fundamental-styles button types in windows high contrast mode

Segmented Button (Previously know as button group)

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between active and inactive buttons in a button group. This qualifies as a loss of information.

Screenshot of Fundamental Styles segmented button

Screenshot of Fundamental Styles segmented button in windows high contrast mode

Button States

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the normal and selected state of all buttons types. This qualifies as a loss of information.

Screenshot of Fundamental Styles button states

Screenshot of Fundamental Styles button states in windows high contrast mode

Form

Input States

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the normal, success, error, warning, and information states of all inputs (textbox, textarea, radio buttons, and checkboxes) because they rely solely on color. This qualifies as a loss of information.

Screenshot of Fundamental Styles form input states

Screenshot of Fundamental Styles form input states in windows high contrast mode

Select

The arrow on the select control is not visible in HCM. This qualifies as a loss of information.

Screenshot of Fundamental Styles select control

Screenshot of Fundamental Styles select control in windows high contrast mode

Input Group

Input with actions

The focus ring, on the input actions, is barely visible in normal mode and completely invisible in the HCM.

Screenshot of Fundamental Styles input group with actions, keyboard focus on action

Screenshot of Fundamental Styles input group with actions, keyboard focus on action in windows high contrast mode

States

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the normal, success, error, warning, and information input group states because they rely solely on color. This qualifies as a loss of information.

Screenshot of Fundamental Styles input group states

Screenshot of Fundamental Styles input group states in windows high contrast mode

Number Spinner

The focus ring, on the number spinner arrows, is barely visible in normal mode and partially invisible in the HCM such that it is not possible to understand which spinner arrow is focused through visual perception.

Screenshot of Fundamental Styles number spinner

Screenshot of Fundamental Styles number spinner in windows high contrast mode

Tabs

Selected Tab

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the normal and selected/active tab because they rely solely on the bottom-border-color. This qualifies as a loss of information.

Screenshot of Fundamental Styles selected tab

Screenshot of Fundamental Styles selected tab in windows high contrast mode

Tab Icon Only Cozy Mode

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the normal and selected/active tab in icon only cozy mode because they rely solely on the bottom-border-color. This qualifies as a loss of information.

Screenshot of Fundamental Styles Tab Icon Only Cozy Mode

Screenshot of Fundamental Styles Tab Icon Only Cozy Mode in windows high contrast mode

Semantic tabs

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the different types of semantic tabs nor the selected/active tab, because they rely solely on the button color and bottom-border-color. This qualifies as a loss of information.

Screenshot of Fundamental Styles Semantic tabs

Screenshot of Fundamental Styles Semantic tabs in windows high contrast mode

Asset Upload

Focus state

We use a dotted line to indicate focus everywhere. However, the asset upload widget already has a dotted border in its un-focused state. It has a solid border in its focused state. This would be confusing and disorienting for some users, especially in the HCM where the dark blue border loses color.

Screenshot of Fundamental Styles asset upload focus state

Screenshot of Fundamental Styles Semantic asset upload focus state in windows high contrast mode

Images

Visibility

Images become completely invisible in HCM.

Screenshot of Fundamental Styles images

Screenshot of Fundamental Styles Semantic images in windows high contrast mode

Busy Indicator

Visibility

Though there are directions on how to use the busy indicator for contrast mode, none of the busy indicators are visible in HCM.

Screenshot of Fundamental Styles busy indicator

Screenshot of Fundamental Styles busy indicator in windows high contrast mode

Screenshot of Fundamental Styles busy indicator HCM usage example

Screenshot of Fundamental Styles busy indicator HCM usage example in windows high contrast mode

Calendar

States, special days and modified days

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the various states, special days, and modified days of the calendar grid. This qualifies as a loss of information.

Date Modifiers Screenshot of Fundamental Styles calendar elements modifiers

Screenshot of Fundamental Styles calendar elements modifiers in windows high contrast mode

Date States

Screenshot of Fundamental Styles calendar states

Screenshot of Fundamental Styles calendar states in windows high contrast mode

Special Days

Screenshot of Fundamental Styles calendar special days

Screenshot of Fundamental Styles calendar special days in windows high contrast mode

Calendar Example

Screenshot of Fundamental Styles calendar example

Screenshot of Fundamental Styles calendar example in windows high contrast mode

Identifiers

Outline

Identifiers' outline not visible in HCM.

Screenshot of Fundamental Styles Identifier

Screenshot of Fundamental Styles Identifier in windows high contrast mode

List

Standard List selected state

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between a selected and unselected list item because they rely solely on color. This qualifies as a loss of information.

Screenshot of Fundamental Styles standard list selected item

Screenshot of Fundamental Styles standard list selected item in windows high contrast mode

Borderless List selected state

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between a selected and unselected list item because they rely solely on color. The selected item has a bottom-border that visually looks like a list item separator. This qualifies as a loss of information and can be confusing for HCM users.

Screenshot of Fundamental Styles Borderless List selected state

Screenshot of Fundamental Styles Borderless List selected state in windows high contrast mode

Notification

Outline

Notification box outline not visible in HCM. This might be disorienting and confusing for some users as notification content will not be visually separated from the page content.

Screenshot of Fundamental Styles notification

Screenshot of Fundamental Styles notification in windows high contrast mode

Popover

Outline

Popover body outline not visible in HCM. This might be disorienting and confusing for some users as popover contents will not be visually separated from the page content.

Screenshot of Fundamental Styles popover

Screenshot of Fundamental Styles popover in windows high contrast mode

Select

Option Selection State

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between a selected and unselected select option because they rely on color and bottom-border. The selected option has a bottom-border that visually looks like an item separator. This qualifies as a loss of information and can be confusing for HCM users.

Screenshot of Fundamental Styles Select option selection state

Screenshot of Fundamental Styles Select option selection state in windows high contrast mode

Sidenav

Active Navigation Item State

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between active and inactive sidenav items because they rely on color and bottom-border. Active and inactive side nav items look alike. This qualifies as a loss of information and can be confusing for HCM users.

Screenshot of Fundamental Styles Sidenav with Active Navigation Item

Screenshot of Fundamental Styles Select Sidenav with Active Navigation Item in windows high contrast mode

Table

Column header sorting indicator

The column header sorting indicator is not visible in HCM. This qualifies as a loss of information.

Screenshot of Fundamental Styles table with column sorting

Screenshot of Fundamental Styles table with column sorting in windows high contrast mode

Token

Default and Selected

Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the default and selected token types because they rely solely on color. This qualifies as a loss of information.

Default Tokens

Screenshot of Fundamental Styles Default Tokens

Screenshot of Fundamental Styles Default Tokens in windows high contrast mode

Selected Tokens

Screenshot of Fundamental Styles Selected Tokens

Screenshot of Fundamental Styles Selected Tokens in windows high contrast mode

Windows High Contrast Mode Exploration - SAP/fundamental-styles GitHub Wiki

Implications for Fiori 3 High Contrast Themes

Windows High Contrast Mode

macOS High Contrast Mode

Testing Windows High Contrast Mode without Windows

Proposed criteria and accessibility best practices

Findings

Buttons

Form

Input Group

Tabs

Asset Upload

Images

Busy Indicator

Calendar

Identifiers

List

Menu

Notification

Popover

Select

Sidenav

Table

Token