The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Usage the color palettes

Whether designing new components and UI elements, or simply re-branding an application, follow these simple rules to consistently use and combine the color palettes for text, backgrounds, and links.


Text and titles on monochromatic backgrounds

The text color must be white on black backgrounds. On white backgrounds the text color must be the darkest shade of gray.

#686565

$eos-bc-gray-900

Default text color on white

#FFFFFF

$eos-bc-white

Default text color on dark gray

Text and titles on colored backgrounds

Always use white as text color on colored backgrounds. If the contrast between white text and the background fails, use dark gray as text color.

#FFFFFF

$eos-bc-white

Text on colored backgrounds

#141823

$eos-bc-gray-1000

Text on colored backgrounds


Color contrast

When choosing colors take into account the contrast ratio of the foreground to the background color. The W3C created guidelines for exactly this purpose (WCAG 2.0). These require that text uses adequate contrast for visually impaired people.

WCAG 2.0 Level AA (standard) requires a contrast ratio of at least 4.5:1 for normal text (14px) and 3:1 for larger text (~18px). This level represents people with 20/40 vision (typical visual acuity of elders at roughly age 80).

While our software should be usable by people with slightly impaired vision, we have made certain exceptions to express our brand properly while taking into account the overall effect on the usability and accessibility of our products.

How to check the contrast ratio

The most common tool is contrast-ratio.com where you can check the contrast ratio between two colors.