Convey meaning through color with a handful of color utility classes.
On this page
Colors
Content color utility classes, in the form .text-*, apply a color token as color for a content or 'always' color dynamically depending on the color mode.
To colorize icons, please refer to our icon color section.
OUDS Web provides many .text-* and .bg-* utilities, but they should be used with care to meet our design specifications and WCAG 2.2 accessibility standards for color contrast.
To ensure compliance with the standard, define color, background-color, and font-size together.
Thus, the .text-brand-primary color on light background (#f15e00) should only be used in a font size greater than 24px (using for example .fs-ds utility), or 19px bold (using for example .fs-hm and .fw-bold utilities).
The .text-brand-primary color on dark background (#ff7900) can be used in any size.
Here are some compliant combinations examples for texts:
Text brand-primary
Text default
Text disabled
Text inverse
Text muted
Text on-brand-primary
Text on-status-accent-emphasized
Text on-status-accent-muted
Text on-status-info-emphasized
Text on-status-info-muted
Text on-status-negative-emphasized
Text on-status-negative-muted
Text on-status-positive-emphasized
Text on-status-positive-muted
Text on-status-warning-emphasized
Text on-status-warning-muted
Text status-accent
Text status-info
Text status-negative
Text status-positive
Text status-warning
Text always-black
Text always-white
Text always-on-black
Text always-on-white
<p class="text-brand-primary p-small fs-hl">Text brand-primary</p>
<p class="text-default p-small fs-hl">Text default</p>
<p class="text-disabled p-small fs-hl">Text disabled</p>
<p class="text-inverse p-small fs-hl">Text inverse</p>
<p class="text-muted p-small fs-hl">Text muted</p>
<p class="bg-surface-brand-primary text-on-brand-primary p-small fs-hl">Text on-brand-primary</p>
<p class="bg-surface-status-accent-emphasized text-on-status-accent-emphasized p-small fs-hl">Text on-status-accent-emphasized</p>
<p class="bg-surface-status-accent-muted text-on-status-accent-muted p-small fs-hl">Text on-status-accent-muted</p>
<p class="bg-surface-status-info-emphasized text-on-status-info-emphasized p-small fs-hl">Text on-status-info-emphasized</p>
<p class="bg-surface-status-info-muted text-on-status-info-muted p-small fs-hl">Text on-status-info-muted</p>
<p class="bg-surface-status-negative-emphasized text-on-status-negative-emphasized p-small fs-hl">Text on-status-negative-emphasized</p>
<p class="bg-surface-status-negative-muted text-on-status-negative-muted p-small fs-hl">Text on-status-negative-muted</p>
<p class="bg-surface-status-positive-emphasized text-on-status-positive-emphasized p-small fs-hl">Text on-status-positive-emphasized</p>
<p class="bg-surface-status-positive-muted text-on-status-positive-muted p-small fs-hl">Text on-status-positive-muted</p>
<p class="bg-surface-status-warning-emphasized text-on-status-warning-emphasized p-small fs-hl">Text on-status-warning-emphasized</p>
<p class="bg-surface-status-warning-muted text-on-status-warning-muted p-small fs-hl">Text on-status-warning-muted</p>
<p class="text-status-accent p-small fs-hl">Text status-accent</p>
<p class="text-status-info p-small fs-hl">Text status-info</p>
<p class="text-status-negative p-small fs-hl">Text status-negative</p>
<p class="text-status-positive p-small fs-hl">Text status-positive</p>
<p class="text-status-warning p-small fs-hl">Text status-warning</p>
<p class="text-always-black bg-always-white p-small fs-hl">Text always-black</p>
<p class="text-always-white bg-always-black p-small fs-hl">Text always-white</p>
<p class="text-always-on-black bg-always-black p-small fs-hl">Text always-on-black</p>
<p class="text-always-on-white bg-always-white p-small fs-hl">Text always-on-white</p>
Bootstrap
$enable-bootstrap-compatibility: true
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-black">.text-warning</p>
<p class="text-warning-emphasis bg-black">.text-warning-emphasis</p>
<p class="text-info">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>
<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-black">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50">.text-white-50</p>On icons
See icons documentation to learn how to use color utilities on icons.
Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.