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

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

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

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

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

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

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

Inherit a color

Use the .ds-u-color--inherit utility class to inherit the color of the parent element.

<div class="ds-u-color--error">
  This is an example of
  <!-- -->
  <a href="#" class="ds-u-color--inherit">a link</a>
  <!-- -->
  with the class `ds-u-color--error` error styling.
</div>

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.