Recommended Color Blindness Colors

Discussion Forum SAP Fiori Design Recommended Color Blindness Colors
Viewing 3 posts - 1 through 3 (of 3 total)

Hello All,

I was wondering if anyone had any information on SAP Recommended Colors for color blindness. Are the color palette’s that are contained in SAP Fiori already adjusted for color blindness.

I have not been able to find any data on this so far.

 

Thanks,

Alpha

Concur Technologies, Inc.

Hi Alpha. I can’t officially speak for Fiori since I’m not on that design team. I am on the design team at SAP Concur. In general, for accessibility reasons, color should not be the only source to convey information. If is used, explanatory text should always accompany it.

The most common color blindness is not being able to differentiate green from red. However, it’s still commonly used for traffic lights and statuses on the web. There are other visual impairments as well: protanopia, deuteranopia, tritanopia, achromatopsia (everything is a shade of gray), and others.

At Concur we’ve done significant work on colors for charts and graphs, but the bottom line is that we always include a text version.

Visual Designer
SAP SE

Hi Alpha,

Thank you so much for your question, I have a link to a theme parameter toolbox application that can help you find the color values used in SAP Fiori applications at the end of this post. Please read the following first to get a better overview of how Fiori works in terms of visual accessibility.

There are many types of color blindness. It is not possible to support every type of color blindness with the standard theme. To be able to support color users with color blindness with the standard theme, several requirements have been covered. We have also color logic implemented using theme parameters that allow a company the ability to create special color themes, using theming tools like the UI theme designer, to support special types of color blindness.

Grant is absolutely right about the additional text, or other addtional indicator needed. Color blindness must be covered by the requirements of the Two Senses Concept and minimal contrast.

In WCAG 2.0 these are:

WCAG 2.0, 1.3.3, Level A, Sensory Characteristics

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

WCAG 2.0, 1.4.1, Level A, Use of color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The requirements of the Default Theme in Fiori:

WCAG 2.0, 1.4.3, Level AAContrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

 

The requirements of the High Contrast Themes in Fiori:

WCAG 2.0, 1.4.6, Level AAA, Contrast (Enhanced)

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

High contrast themes have focused more on a basic color blindness support using colors for the main UI controls and interaction states.

Colors of the interaction states of highlights (example: Button Hover) and selection (Example: Toggled button) have been tested with several types of color blindness. For any color blindness types not covered, we have ensured that the high contrast themes are also customizable using the UI theme designer. Companies have the ability to create special or custom color blindness variations of high contrast themes.

 

Color Previews with Theme Parameter Toolbox

This is a link to our demo available as a tool from Open UI5 Demokit

Theme parameter Toolbox is a tool to preview all the color values used in the Fiori UI.

Here is a preview of the colors used in list controls featured in the Belize theme:

In High Contrast themes the amount of colors have been reduced. The background and border colors are stronger and very different from each other for the high contrast black theme to help with color blindness. But we must stress that this theme is still mainly for peolple with low vision ie. they need “high” contrast to meet the above stated requirements, therefore we have attempted to achieve both, with the additional feature of theme customization support.

For High Contrast White the same logic and contrast values are used except with the dark on light logic.

We have put together a simple video to give an overview of the UI theme designer new features (including the ability to customize high contrast black and high contrast white theme colors):

Video: UI Theme Designer – What’s new

For furher information on UI theme designer, see UI Theme Designer Community
and check the Release Notes.

Please also see the article here about color and contrast in Fiori

See also the Theming page on SAP Fiori Design Guidelines.

Viewing 3 posts - 1 through 3 (of 3 total)
 

You must be logged in to reply to this topic.