Use the text color utility to change the default text color of an element.
Format: .ds-u-color--[COLOR NAME]-[SHADE]
Text on background background
.ds-u-color--base#262626.ds-u-color--black#000000.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error#e31c3d.ds-u-color--error-dark#cc1937.ds-u-color--error-darkest#720e1f.ds-u-color--success#12890eText on background-inverse background
.ds-u-color--white#ffffff.ds-u-color--gray-lightest#f2f2f2.ds-u-color--gray-lighter#d9d9d9.ds-u-color--gray-light#a6a6a6.ds-u-color--secondary#12890e.ds-u-color--secondary-light#59ac56.ds-u-color--secondary-lightest#e7f3e7.ds-u-color--secondary-dark#107b0dText on gray-lightest background
.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--base#262626.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error-dark#cc1937.ds-u-color--error-darkest#720e1fText on secondary-lightest background
.ds-u-color--base#262626.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error-dark#cc1937.ds-u-color--error-darkest#720e1fText on success-lightest background
.ds-u-color--base#262626.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error-dark#cc1937.ds-u-color--error-darkest#720e1fText on warn-lightest background
.ds-u-color--base#262626.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error-dark#cc1937.ds-u-color--error-darkest#720e1fText on error-lightest background
.ds-u-color--base#262626.ds-u-color--gray#808080.ds-u-color--gray-dark#5a5a5a.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#094507.ds-u-color--error-darkest#720e1fInherit a color
Use the .ds-u-color--inherit utility class to inherit the color of the parent element.
Accessibility considerations
Text contrast
WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
Text over gradients and background images still need to meet contrast requirements.
Non-text contrast
Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
Easily test your color combinations
Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast: