Color and background

Set a background color with contrasting foreground color.

On this page

Overview

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.

Heads up! There’s currently no support for a CSS-native color-contrast function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.

Brand

Red with contrasting color

Bloom with contrasting color

Chili with contrasting color

Blue with contrasting color

Sky with contrasting color

Oasis with contrasting color

Azurite with contrasting color

Midnight with contrasting color

Cool-Gray with contrasting color

Warm-Gray with contrasting color

Leaf with contrasting color

River with contrasting color

Silver with contrasting color

Mesa with contrasting color

Ash with contrasting color

Sage with contrasting color

White with contrasting color

Black with contrasting color

html

<div class="text-bg-red p-3">Red with contrasting color</div>
<div class="text-bg-bloom p-3">Bloom with contrasting color</div>
<div class="text-bg-chili p-3">Chili with contrasting color</div>
<div class="text-bg-blue p-3">Blue with contrasting color</div>
<div class="text-bg-sky p-3">Sky with contrasting color</div>
<div class="text-bg-oasis p-3">Oasis with contrasting color</div>
<div class="text-bg-azurite p-3">Azurite with contrasting color</div>
<div class="text-bg-midnight p-3">Midnight with contrasting color</div>
<div class="text-bg-cool-gray p-3">Cool-Gray with contrasting color</div>
<div class="text-bg-warm-gray p-3">Warm-Gray with contrasting color</div>
<div class="text-bg-leaf p-3">Leaf with contrasting color</div>
<div class="text-bg-river p-3">River with contrasting color</div>
<div class="text-bg-silver p-3">Silver with contrasting color</div>
<div class="text-bg-mesa p-3">Mesa with contrasting color</div>
<div class="text-bg-ash p-3">Ash with contrasting color</div>
<div class="text-bg-sage p-3">Sage with contrasting color</div>
<div class="text-bg-white p-3">White with contrasting color</div>
<div class="text-bg-black p-3">Black with contrasting color</div>

Contextual (Theme)

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

html

<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

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.

With components

Use them in place of combined .text-* and .bg-* classes, like on badges:

Leaf Sky Mesa

html

<span class="badge text-bg-leaf">Leaf</span>
<span class="badge text-bg-sky">Sky</span>
<span class="badge text-bg-mesa">Mesa</span>

Or on cards:

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

html

<div class="card text-bg-warm-gray mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-chili mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>