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
#12890e
Text 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
#02acd0
Text 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
#720e1f
Text 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
#720e1f
Text 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
#720e1f
Text 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
#720e1f
Text 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
#720e1f
Inherit 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.