-
Notifications
You must be signed in to change notification settings - Fork 60
Windows High Contrast Mode Exploration
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.
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
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.
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).
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
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
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 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
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
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
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
Visibility
Images become completely invisible in HCM.
Screenshot of Fundamental Styles images
Screenshot of Fundamental Styles Semantic images in windows high contrast mode
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
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
Outline
Identifiers' outline not visible in HCM.
Screenshot of Fundamental Styles Identifier
Screenshot of Fundamental Styles Identifier in windows high contrast mode
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
Active menu item
Due to the reduced color palette in the HCM, it is not possible to visually distinguish between an active and inactive menu item because they rely solely on color. This qualifies as a loss of information.
Screenshot of Fundamental Styles Active menu item
Screenshot of Fundamental Styles Active menu item in windows high contrast mode
Menu list with separated items
Menu list item separator not visible in HCM. This qualifies as a loss of information.
Screenshot of Fundamental Styles Menu list with separated items
Screenshot of Fundamental Styles Active Menu list with separated items in windows high contrast mode
Menu list item states
Due to the reduced color palette in the HCM, it is not possible to visually distinguish between the various states (regular vs hover vs active and selected vs selected-hover) of a menu list item. This qualifies as a loss of information.
Screenshot of Fundamental Styles Menu list item states
Screenshot of Fundamental Styles Menu list item states in windows high contrast mode
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
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
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
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
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
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
