Color theme considerations for mobile

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Color theme considerations for mobile

    This guidance helps ServiceNow customers design mobile applications with effective use of color to enhance user experience. Proper color selection improves navigation, highlights important information, and supports accessibility compliance in your mobile apps.

    Show full answer Show less

    Key Features

    • Consistent Color Usage: Maintain consistent color schemes throughout your app to help users identify related tasks or workflows quickly. For example, use blue for incident-related applets and green for work order applets.
    • Simplified Color Palette: Limit the color palette to two or three colors to create a clean, accessible layout.
    • Contrast and Accessibility: Ensure high contrast between text and background for readability, meeting WCAG 2.0 standards with at least a 3:1 contrast ratio. This supports users with low vision and color blindness.
    • Highlighting Focus Areas: Use high contrast, complementary colors to draw user attention to critical application areas.
    • Next Experience Requirement: Color variables only apply when the Next Experience is enabled in your environment.
    • Color Variables and Theme Properties: Colors for variables are defined in the UX Theme Properties table ([sysuxthemeproperty]). These variables override hard-coded color properties when enabled.
    • Fallback Behavior: If a color variable is missing or empty, the system falls back to the specified static HEX color property.
    • Naming Convention: Color variables append a "Variable" suffix to existing color property names (e.g., BackgroundColorVariable corresponds to BackgroundColor).
    • Component Support: Color variables can be applied across UI rules, icons, map icons, card view templates, card view buttons, and input descriptions to customize theming consistently.

    Practical Application for ServiceNow Customers

    By applying these color theme considerations, you can create mobile interfaces that are intuitive and accessible, helping your users efficiently navigate and complete tasks. Enable Next Experience to leverage color variables for dynamic theming and maintain a consistent, accessible color scheme aligned with your organizational workflows and branding.

    Learn how to use color in your mobile applications to improve user experience. Using the right colors for your environment can help guide your users through your app and quickly identify important information.

    Using color

    Keep consistency in your color decisions throughout the app. Associating specific tasks or workflows with colors helps users know when they’re in not in the right place. Consider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users get to related tasks quickly.

    Avoid using too many colors. Simple designs of two to three colors results in a cleaner, more accessible layout.

    Color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background have a high level of contrast to accommodate both low vision and colorblind users. Web Content Accessibility Guidelines (WCAG) 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.

    High contrast, complementary colors can guide your user’s focus. Use these colors to highlight areas of your applications that need your user’s attention.

    General guidelines for color variables

    Before you start using color variables, keep the following guidelines in mind.
    Next Experience must be enabled
    Color variables only take effect when Next Experience is enabled. Otherwise, color variables are ignored
    Colors available for variables are on the UX Theme Properties table

    Color variables use colors defined on the UX Theme Properties [sys_ux_theme_property] table.

    Color variables are additive properties
    Existing color properties (using hard-coded colors) continue to work if the new color variables aren't configured. However, color properties can't dynamically change the color of elements based on the theme​.
    Color variables override color properties
    Color variables override the corresponding non-variable color properties if Next Experience is enabled and the color variable value is found.
    For example, given this UI rule action configuration:
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    and a web color map with this configuration:
    {“--now-color-primary-0": “#22ff00”}
    The resolved background color for this UI rule action will be #22ff00.
    Color properties are used if a variable is not found or has no value
    Color variable will not override if the variable is empty or the color variable value is not found. In these cases, the color property (HEX) is used.
    For example, given this configuration:
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    The color value is #3f2c11.
    Given this configuration: 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    and a web color map with this configuration: 
    {“--now-color-primary-1": “#1134a1”}
    The background color value is #3f2c11.
    Color variables use a naming convention
    The naming convention of color variables is to add a Variable suffix to existing color properties.​
    For example, BackgroundColorVariable is used for BackgroundColor
    Configure both hex and color variables

    Color variable support by component

    Use these links to learn how to use color variables to change theming in your mobile components.