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 .ds-u-fill--background background

.ds-u-color--base
.ds-u-color--black
.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--primary
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error
.ds-u-color--error-dark
.ds-u-color--error-darkest
.ds-u-color--success

Text on .ds-u-fill--background-inverse background

.ds-u-color--white
.ds-u-color--gray-lightest
.ds-u-color--gray-lighter
.ds-u-color--gray-light
.ds-u-color--secondary
.ds-u-color--secondary-light
.ds-u-color--secondary-lightest
.ds-u-color--secondary-dark

Text on .ds-u-fill--gray-lightest background

.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--base
.ds-u-color--primary
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error-dark
.ds-u-color--error-darkest

Text on .ds-u-fill--secondary-lightest background

.ds-u-color--base
.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error-dark
.ds-u-color--error-darkest

Text on .ds-u-fill--success-lightest background

.ds-u-color--base
.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--primary
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error-dark
.ds-u-color--error-darkest

Text on .ds-u-fill--warn-lightest background

.ds-u-color--base
.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--primary
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error-dark
.ds-u-color--error-darkest

Text on .ds-u-fill--error-lightest background

.ds-u-color--base
.ds-u-color--gray
.ds-u-color--gray-dark
.ds-u-color--primary-darker
.ds-u-color--primary-darkest
.ds-u-color--secondary-darkest
.ds-u-color--error-darkest

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.