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

Edit preferences

How to use 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 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

$bc-gray-900

Default text color on white

#FFFFFF

$bc-white

Default text color on black

Text on colored backgrounds

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

#FFFFFF

$bc-white

Text on colored backgrounds

#000000

$bc-black

Text on colored backgrounds

Link colors

The darkest shade (900) of the SUSE cerulean color is the default color for links.

#008ACF

$bc-cerulean-900

This is the default link color

When the color contrast fails between the $bc-cerulean-900 and the element's background, use the default (500) SUSE blue color.

#00243E

$bc-blue-500

Link on colored background

Special use case

When the element's background uses SUSE blue (one of the two primary colors), the primary SUSE green color should be used as link color.

#00C081

$bc-green-500

Primary color background with primary color link


Color contrast

When chosing colors take into account the contrast ratio of the foreground to 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 in order to express our brand properly while taking into account the overall effect on the usability and accesability 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.