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 tasks efficiently and recognize important information quickly.
Show less
Key Features
- Consistency: Maintain a consistent color scheme across your app for related tasks to aid user navigation.
- Simplicity: Limit your color palette to two or three colors for a cleaner, more accessible design.
- High Contrast: Ensure text and background colors have a high contrast ratio (at least 3:1) for readability, accommodating users with low vision or color blindness.
- Color Variables: Use color variables effectively when Next Experience is enabled, allowing for dynamic theme changes.
Key Outcomes
By following these guidelines, you can create a visually appealing and user-friendly mobile application that enhances usability and accessibility. Effective color management will lead to improved user engagement and satisfaction with your app.
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.