Accessibility

Color contrast is the ratio measuring the difference between the color of the foreground element against the color of the background. Achieving the minimum contrast ratio ensures that all text and visual elements in our design system are legible to all users including visually impaired and/or color-blind users. If the color appears faint against the background, it may be a sign that the color has insufficient color contrast. First, determine its current contrast ratio, second, determine the target contrast ratio of the UI element (e.g., 3:1, 4.5:1, 7:1), and lastly, follow our color pairing system. To validate this, use a color contrast calculator.

Color contrast ratio examples

The tonal option makes direct use of Material 3’s color roles, enabling you to create color combinations that meet WCAG accessibility standards. Color roles help guide in selecting colors by assigning descriptive names to tokens that indicate their intended use in the user interface. For instance, "On Primary" is specified as a foreground color for the "Primary" background. By using these descriptive names, applying color roles outside their intended purposes can be avoided to prevent creating inaccessible color combinations.

Color contrast is achieved when using the color roles as intended

Color Contrast Modes

Horizon’s tonal option supports three levels of color contrast to accommodate the different accessibility needs of users. These different levels of color contrast include standard, medium, and high contrast modes. With each mode, color contrast is increased to meet each mode’s color contrast targets.

Foreground color increases in contrast with each color contrast mode

Standard Contrast

Standard contrast is the default contrast mode for the SAP Fiori for Android SDK. This color contrast ratio uses different levels of contrast throughout the UI for different levels of visual emphasis.

App screen in standard contrast mode

Medium Contrast

Medium contrast increases the color contrast target to a minimum color contrast ratio of 3:1 for text, content, containers, and graphical elements. This color contrast mode ensures readability for those with moderate visual impairment at the expense of diminished visual focus.

App screen in medium contrast mode

High Contrast

High contrast increases the minimum color contrast ratio to 7:1 for text, content, containers, and graphical elements. This ensures the highest possible color contrast for people with visual impairments and emphasizes all important visual elements across the UI.

App screen in high contrast mode