Colors

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

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.

Note

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 inverse

Text muted

Text on-brand-primary

Text on-brand-secondary

Text on-brand-tertiary

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

html

Note

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:

Large texts are texts that are at least 24px or 19px bold. This corresponds to at least .fs-hl and above or .fs-hm bold and above in OUDS Web.
Normal texts are the remaining texts references.

Bootstrap $enable-bootstrap-compatibility: true

Note

This part is enabled only when $enable-bootstrap-compatibility is set to true.

Read more about Bootstrap compatibility

.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

Heads up!

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

Colors

On this page On this page

Colors

On icons

Specificity

On this page