Skip to main content
U.S. Flag

An official website of the United States government

Text Color

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.

This is an example of a link with the class `ds-u-color--error` error styling.

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.