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.
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.
The most common tool is contrast-ratio.com where you can check the contrast ratio between two colors.
Report an issue or share an idea
Thank you for helping us improve EOS.
