Theming and accessibility often go hand-in-hand. Users want to work in a personalized visual context, and that environment needs to support their unique visual needs. Theming isn’t just about color palettes or brand alignment. It’s how we at ServiceNow design for accessibility from the start and create experiences that work for everyone. Theming isn’t just about color palettes or brand alignment. It’s how we at ServiceNow design for accessibility from the start and create experiences that work for everyone.
There are a lot of ways ServiceNow supports a wide variety of accessibility needs. There are tools we use internally at ServiceNow, like this Figma plugin that checks the color contrast of experiences as you're building. Our design system, Horizon, bakes intent-based tokens to solve for a wide variety of needs (see below). And there are key principles we aim to abide by when addressing those specific needs.
Based on the Horizon website, there are several accessibility types that ServiceNow theming supports.
- Mobility includes movement-based disabilities, supported by features like tab order and focus indicators to make an inclusive experience for users. Theming can adjust the color, width, and shape of focus indicators to refine the experience.
- Low vision can impact a user's ability to interact with applications and is supported by features like color contrast. In Theme Builder, users creating themes can check and correct the color contrast values of their components to ensure they meet WCAG 2.1AA requirements.
- Neurodiversity refers to how our brains are unique and diverse. Users that prefer to work in dark mode for better focus and reduced visual stimulation from bright screens are accommodated right away with the default Coral dark theme provided by ServiceNow. In Theme Builder, users can create custom dark themes to match their brands. In the future, theming could expand to reducing animations and adjusting spacing to support other neurodiversity needs.
- Intersectionality recognizes that individuals may experience multiple disabilities simultaneously. Theming is a broad and highly configurable framework that allows for flexible changes and variations in styles all at once
Tokens are the theming mechanism to achieve intent-based design. Design tokens are reusable elements that express design choices such as color, typography, spacing, and motion to ensure consistency and clarity across a product. They also capture why a value exists and how it should be used, which improves consistency, automation, and predictability across the system.
Token values can be applied based on intent like distinguishing between actionable elements and loading states. (See examples below.)
- Example of an actionable token type, applied to actionable elements—like buttons, dropdowns, and split buttons—to clearly signal user actions.
- Example of a loading token type, applied to component backgrounds during loading states.
Design tokens provide a consistent way to adapt the UI to user preferences - like choosing between default and compact spacing, or light or dark mode, to match how someone works best. Tokens can also support accessibility by enabling additional UI modifications for individuals with specific needs.
Horizon provides a multitude of ways to solve accessibility and WCAG compliance , and theming is a powerful tool to support those solutions. ServiceNow provides dark themes out of the box. Tokens provide an intuitive way to create themes that accommodate combinations of needs. Theme Builder provides tooling to ensure themes are compliant with accessibility standards. Our Accessibility Center of Excellence is continuously learning and evolving to meet user needs, with the theming team playing a key role at the table.
