Use the text color utility to change the default text color of an element.
The options below offer color palette combinations that fall within the range of Section 508 compliant and WCAG 2.0 level AA standards which is a minimum color contrast ratio of 4.5:1.
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#5a5a5a.ds-u-color--gray-dark#404040.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#016074.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#02bfe7.ds-u-color--secondary-light#4ed2ee.ds-u-color--secondary-lightest#e6f9fd.ds-u-color--secondary-dark#02acd0Text on gray-lightest background
.ds-u-color--gray#5a5a5a.ds-u-color--gray-dark#404040.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#016074.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#5a5a5a.ds-u-color--gray-dark#404040.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#016074.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#5a5a5a.ds-u-color--gray-dark#404040.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#016074.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#5a5a5a.ds-u-color--gray-dark#404040.ds-u-color--primary#0071bc.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#016074.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#5a5a5a.ds-u-color--gray-dark#404040.ds-u-color--primary-darker#004f84.ds-u-color--primary-darkest#00395e.ds-u-color--secondary-darkest#016074.ds-u-color--error-darkest#720e1fInherit a color
Use the .ds-u-color--inherit utility class to inherit the color of the parent element.
Guidance
Accessibility
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.
You can use the WebAIM color contrast checker to test your color combinations.