Colors

Use consistent, accessible color choices to guide users, support branding, and improve readability across your mobile experience.

Using color

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

Avoid using too many colors. Simple designs of two to three colors result 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 color-blind users. 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.

Use mobile themes to give your applications a unique appearance that works with your company identity. From the Utah release, the mobile theme base system unified to inherit theme colors from the ServiceNow Next Experience UI theme. Instead of using hardcoded colors in the mobile apps, all screens and components are now associated with color variables. You can also create a custom mobile theme and assign it to a mobile client from Mobile App Builder. In addition to the six mobile palette options: brand, primary, secondary, destructive, positive and tertiary, you can define additional color variables for mobile UI rules, navigation section, map pin, icons, view template, mobile view buttons and input descriptions. For more info regarding Next Experience theming on mobile and color variable configuration guidelines, refer to Next Experience theming for mobile and Color theme considerations for mobile.

Using color - new theme colors

From the Vancouver release, dark themes are also supported on mobile. Consider utilizing the base system Next Experience dark theme or create your own dark theme variants in Next Experience. End users can switch to the dark variant or any other variants through ServiceNow mobile app settings.

Using color - icon section