Contrast

With a well-designed color system, we can ensure that text always has sufficient contrast against our background colors, and that there are enough distinct colors to cover all states.

The color system is structured to support both multibranding and different modes (light/dark mode), while also meeting contrast requirements. The theme builder ensures that both brand colors and contrast requirements are respected by generating a full color set based on your chosen brand color. Colors intended for text will always have sufficient contrast against background colors.

Examples:

• Text-default always has sufficient contrast against all background and surface colors.
• Text-subtle always has sufficient contrast against all background colors and surface-default.
• This applies regardless of which base color you have chosen.

The Base-default color will always match the color you selected. This is to preserve your brand identity as much as possible. You are therefore responsible for ensuring that the color you choose meets contrast requirements for its intended use. The Designsystemet theme generator will notify you of any contrast issues.