The text color must be white on black backgrounds. On white backgrounds the text color must be the darkest shade of gray.
$bc-gray-900
Default text color on white
$bc-white
Default text color on black
Always use white as text color on colored backgrounds. If the contrast between white text and the background fails, use black as text color.
$bc-white
Text on colored backgrounds
$bc-black
Text on colored backgrounds
The darkest shade (900) of the SUSE cerulean color is the default color for links.
$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.
$bc-blue-500
Link on colored background
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.
$bc-green-500
Primary color background with primary color link
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.
The most common tool is contrast-ratio.com where you can check the contrast ratio between two colors.