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.
The text color must be white on black backgrounds. On white backgrounds the text color must be the darkest shade of gray.
$eos-bc-gray-1000
Default text color on white
$eos-bc-white
Default text color on dark gray
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.
$eos-bc-white
Text on colored backgrounds
$eos-bc-gray-1000
Text on colored backgrounds
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.
The 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.
An example of an exception is the selected item in the main menu, which uses the white color for text over a green background. Although the accessibility contrast ratios indicate that this choice isn't compliant with the WCAG, studies have shown that the button with the white text is more readable and thus preferred by the user (source).
The most common tool is contrast-ratio.com where you can check the contrast ratio between two colors.
Share your rebranded product to inspire other SUSE developers.
Tell us your name and your products' so that we can get in touch with you:
Thank you for for sharing your product success story with us.
Thank you for helping us improve EOS.