On-background colors are special foreground colors designed to pair with specific backgrounds. This approach ensures an accessible contrast ratio between the background and the content placed on top of it, catering to a variety of theming scenarios.
On-background colors may only be used for the following properties:
|
iOS (Swift) |
textColor, tintColor |
|---|---|
|
Web (SCSS) |
color, fill |
|
Android (XML) |
android:textColor, android:tint |
|
Android (Kotlin) |
setTextColor(), setTintColor() |
Currently, on-background colors are used exclusively with contextual and categorical backgrounds. These encompass all variants of brand, neutral, info, success, warning, danger, and all category backgrounds.
Whenever a contextual or categorical background color is used, the corresponding on-background color must be applied to all texts, icons, and any other content placed on top, ensuring optimal readability and accessibility.
Pairing colors
Choosing the right on-background color for your background is fairly simple. Just add the "on" prefix to the name of your background color, and you'll get the correct foreground color that you can use on that background.
Resources
Below, you can find additional documentation and resources to help you navigate the world of design tokens. The documentation includes guides for engineers and designers, as well as high-level information about our design tokens at Backbase.
Semantic tokens
Discover all foundational concepts to get you started with our new semantic tokens architecture.
Background colors
Semantically setting the background of your UI
Foreground colors
Meant for generic content
On-background colors
Pairing colors to ensure accessible contrast ratios
Border colors
Consistently coloring borders of UI elements
Focus colors
A specific highlight for interactive elements
Link colors
Special colors for interactive text elements
Migration
Learn more about how to migrate to the latest version of our design tokens (semantic tokens).
Introduction
The first step when migrating your project setup to the new token architecture
Migration in Android
Migrate your Android setup to the new token architecture introduced in the 2024.09-LTS release
Migration in iOS
Migrate your iOS setup to the new token architecture introduced in the 2024.09-LTS release
Migration in Web
Migrate your web setup to the new token architecture introduced in the 2024.09-LTS release