View on GitHub

Colors

Convey meaning through color with a handful of color utility classes.

On this page

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Colors

Colorize text with color utilities. 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 be sure to respect the specifications, it is necessary to define color, background-color and font-size altogether.

Know that apart .text-brand-primary, .text-default and .text-muted, most of these utilities should be avoided since they are very contextual and you should rather use our color modes directly as explained in our background utilities to set nested components in the right mode directly as well.

Here are some compliant combinations examples for texts:

Text brand-primary

Text brand-secondary

Text brand-tertiary

Text default

Text disabled

Text muted

Text on-brand-primary

Text on-brand-secondary

Text on-brand-tertiary

Text on-overlay-emphasized

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-neutral-emphasized

Text on-status-neutral-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-sm">Text brand-primary</p>
<p class="text-brand-secondary p-sm">Text brand-secondary</p>
<p class="text-brand-tertiary p-sm">Text brand-tertiary</p>
<p class="text-default p-sm">Text default</p>
<p class="text-disabled p-sm">Text disabled</p>
<p class="text-muted p-sm">Text muted</p>
<p class="bg-brand-primary text-on-brand-primary p-sm">Text on-brand-primary</p>
<p class="bg-brand-secondary text-on-brand-secondary p-sm">Text on-brand-secondary</p>
<p class="bg-brand-tertiary text-on-brand-tertiary p-sm">Text on-brand-tertiary</p>
<p class="bg-overlay-emphasized text-on-overlay-emphasized p-sm">Text on-overlay-emphasized</p>
<p class="bg-status-accent-emphasized text-on-status-accent-emphasized p-sm">Text on-status-accent-emphasized</p>
<p class="bg-status-accent-muted text-on-status-accent-muted p-sm">Text on-status-accent-muted</p>
<p class="bg-status-info-emphasized text-on-status-info-emphasized p-sm">Text on-status-info-emphasized</p>
<p class="bg-status-info-muted text-on-status-info-muted p-sm">Text on-status-info-muted</p>
<p class="bg-status-negative-emphasized text-on-status-negative-emphasized p-sm">Text on-status-negative-emphasized</p>
<p class="bg-status-negative-muted text-on-status-negative-muted p-sm">Text on-status-negative-muted</p>
<p class="bg-status-neutral-emphasized text-on-status-neutral-emphasized p-sm">Text on-status-neutral-emphasized</p>
<p class="bg-status-neutral-muted text-on-status-neutral-muted p-sm">Text on-status-neutral-muted</p>
<p class="bg-status-positive-emphasized text-on-status-positive-emphasized p-sm">Text on-status-positive-emphasized</p>
<p class="bg-status-positive-muted text-on-status-positive-muted p-sm">Text on-status-positive-muted</p>
<p class="bg-status-warning-emphasized text-on-status-warning-emphasized p-sm">Text on-status-warning-emphasized</p>
<p class="bg-status-warning-muted text-on-status-warning-muted p-sm">Text on-status-warning-muted</p>
<p class="text-status-accent p-sm">Text status-accent</p>
<p class="text-status-info p-sm">Text status-info</p>
<p class="text-status-negative p-sm">Text status-negative</p>
<p class="text-status-positive p-sm">Text status-positive</p>
<p class="text-status-warning p-sm">Text status-warning</p>
<p class="text-always-black p-sm">Text always-black</p>
<p class="text-always-white p-sm">Text always-white</p>
<p class="text-always-on-black bg-always-black p-sm">Text always-on-black</p>
<p class="text-always-on-white bg-always-white p-sm">Text always-on-white</p>
html

If you don’t see the couple you need in the following table, please mind using one of the table or check that the contrast between the text and the background is at least 4.5 for normal text and 3 for large text.

These text categories are some accessibility text categories commonly used. They divide the texts into two categories:

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>
html

.text-black-50 and .text-white-50 are deprecated as of Bootstrap v5.1.0. They’ll be removed in Bootstrap v6.0.0.

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.