Color theme considerations for mobile
Summarize
Summary of Color Theme Considerations for Mobile
This guide provides essential insights on using color effectively in mobile applications to enhance user experience. Proper color usage helps users navigate the app and quickly recognize important information.
Show less
Key Features
- Consistency: Maintain uniform color choices across the app to associate tasks with specific colors, aiding in user orientation.
- Simplicity: Limit the color palette to two or three colors for a cleaner, more accessible design.
- Readability: Ensure high contrast between text and background to support users with low vision and color blindness, adhering to WCAG 2.0 guidelines (minimum 3:1 contrast ratio).
- Guiding Focus: Use high contrast, complementary colors to draw attention to critical areas within the app.
General Guidelines for Color Variables
- Ensure Next Experience is enabled for color variables to function.
- Color variables are defined in the UX Theme Properties table and can override existing hard-coded colors.
- If a color variable is empty or undefined, the default color property (HEX) will be used.
- Follow the naming convention by adding a "Variable" suffix to existing color properties (e.g., BackgroundColorVariable).
Key Outcomes
By applying these color considerations, ServiceNow customers can create more intuitive mobile applications that improve user engagement and accessibility, ensuring a better overall user experience.
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
- 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.
- 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.
- Color variables use a naming convention
- The naming convention of color variables is to add a
Variablesuffix to existing color properties. - 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.