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

Custom Arizona Bootstrap Classes

Red with contrasting color

Bougainvillea with contrasting color

Sonoran-Red with contrasting color

Blue with contrasting color

Rain with contrasting color

Arroyo-Blue with contrasting color

Azurite with contrasting color

Tinta with contrasting color

Cloud with contrasting color

Caliche with contrasting color

Saguaro with contrasting color

Shade with contrasting color

Silver with contrasting color

Brick 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-bougainvillea p-3">Bougainvillea with contrasting color</div>
<div class="text-bg-sonoran-red p-3">Sonoran-Red with contrasting color</div>
<div class="text-bg-blue p-3">Blue with contrasting color</div>
<div class="text-bg-rain p-3">Rain with contrasting color</div>
<div class="text-bg-arroyo-blue p-3">Arroyo-Blue with contrasting color</div>
<div class="text-bg-azurite p-3">Azurite with contrasting color</div>
<div class="text-bg-tinta p-3">Tinta with contrasting color</div>
<div class="text-bg-cloud p-3">Cloud with contrasting color</div>
<div class="text-bg-caliche p-3">Caliche with contrasting color</div>
<div class="text-bg-saguaro p-3">Saguaro with contrasting color</div>
<div class="text-bg-shade p-3">Shade with contrasting color</div>
<div class="text-bg-silver p-3">Silver with contrasting color</div>
<div class="text-bg-brick p-3">Brick 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)

Primary with contrasting color

Secondary with contrasting color

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-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<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.

Grayscale

Custom Arizona Bootstrap Classes

.gray-100 with contrasting color

.gray-200 with contrasting color

.gray-300 with contrasting color

.gray-400 with contrasting color

.gray-500 with contrasting color

.gray-600 with contrasting color

.gray-700 with contrasting color

.gray-800 with contrasting color

.gray-900 with contrasting color

html

<div class="text-bg-gray-100 p-3">.gray-100 with contrasting color</div>
<div class="text-bg-gray-200 p-3">.gray-200 with contrasting color</div>
<div class="text-bg-gray-300 p-3">.gray-300 with contrasting color</div>
<div class="text-bg-gray-400 p-3">.gray-400 with contrasting color</div>
<div class="text-bg-gray-500 p-3">.gray-500 with contrasting color</div>
<div class="text-bg-gray-600 p-3">.gray-600 with contrasting color</div>
<div class="text-bg-gray-700 p-3">.gray-700 with contrasting color</div>
<div class="text-bg-gray-800 p-3">.gray-800 with contrasting color</div>
<div class="text-bg-gray-900 p-3">.gray-900 with contrasting color</div>

Transparent

Custom Arizona Bootstrap Classes

These text background classes set the text color by default. Other background classes that do not set the text color are found on the Background color utilities page. This includes bg-transparent.

.text-bg-transparent-red with contrasting color

.text-bg-transparent-bougainvillea with contrasting color

.text-bg-transparent-sonoran-red with contrasting color

.text-bg-transparent-blue with contrasting color

.text-bg-transparent-rain with contrasting color

.text-bg-transparent-arroyo-blue with contrasting color

.text-bg-transparent-azurite with contrasting color

.text-bg-transparent-tinta with contrasting color

.text-bg-transparent-cloud with contrasting color

.text-bg-transparent-caliche with contrasting color

.text-bg-transparent-white with contrasting color

.text-bg-transparent-black with contrasting color

html

<div class="position-relative overflow-hidden">
  <img class="position-absolute bottom-0" src="/arizona-bootstrap/v5/docs/5.3/assets/img/photo-gallery-demo/gallery-img-1.jpg" alt="University of Arizona Spring Fling">
  <div class="text-bg-transparent-red p-3 position-relative">.text-bg-transparent-red with contrasting color</div>
  <div class="text-bg-transparent-bougainvillea p-3 position-relative">.text-bg-transparent-bougainvillea with contrasting color</div>
  <div class="text-bg-transparent-sonoran-red p-3 position-relative">.text-bg-transparent-sonoran-red with contrasting color</div>
  <div class="text-bg-transparent-blue p-3 position-relative">.text-bg-transparent-blue with contrasting color</div>
  <div class="text-bg-transparent-rain p-3 position-relative">.text-bg-transparent-rain with contrasting color</div>
  <div class="text-bg-transparent-arroyo-blue p-3 position-relative">.text-bg-transparent-arroyo-blue with contrasting color</div>
  <div class="text-bg-transparent-azurite p-3 position-relative">.text-bg-transparent-azurite with contrasting color</div>
  <div class="text-bg-transparent-tinta p-3 position-relative">.text-bg-transparent-tinta with contrasting color</div>
  <div class="text-bg-transparent-cloud p-3 position-relative">.text-bg-transparent-cloud with contrasting color</div>
  <div class="text-bg-transparent-caliche p-3 position-relative">.text-bg-transparent-caliche with contrasting color</div>
  <div class="text-bg-transparent-white p-3 position-relative">.text-bg-transparent-white with contrasting color</div>
  <div class="text-bg-transparent-black p-3 position-relative">.text-bg-transparent-black with contrasting color</div>
</div>

Gradient

Custom Arizona Bootstrap Classes

.text-bg-gradient-red with contrasting color

.text-bg-gradient-bougainvillea with contrasting color

.text-bg-gradient-sonoran-red with contrasting color

.text-bg-gradient-blue with contrasting color

.text-bg-gradient-rain with contrasting color

.text-bg-gradient-arroyo-blue with contrasting color

.text-bg-gradient-azurite with contrasting color

.text-bg-gradient-tinta with contrasting color

.text-bg-gradient-cloud with contrasting color

.text-bg-gradient-caliche with contrasting color

.text-bg-gradient-white with contrasting color

.text-bg-gradient-black with contrasting color

html

<div class="position-relative overflow-hidden">
  <img class="position-absolute bottom-0" src="/arizona-bootstrap/v5/docs/5.3/assets/img/photo-gallery-demo/gallery-img-1.jpg" alt="University of Arizona Spring Fling">
  <div class="text-bg-gradient-red p-3 position-relative">.text-bg-gradient-red with contrasting color</div>
  <div class="text-bg-gradient-bougainvillea p-3 position-relative">.text-bg-gradient-bougainvillea with contrasting color</div>
  <div class="text-bg-gradient-sonoran-red p-3 position-relative">.text-bg-gradient-sonoran-red with contrasting color</div>
  <div class="text-bg-gradient-blue p-3 position-relative">.text-bg-gradient-blue with contrasting color</div>
  <div class="text-bg-gradient-rain p-3 position-relative">.text-bg-gradient-rain with contrasting color</div>
  <div class="text-bg-gradient-arroyo-blue p-3 position-relative">.text-bg-gradient-arroyo-blue with contrasting color</div>
  <div class="text-bg-gradient-azurite p-3 position-relative">.text-bg-gradient-azurite with contrasting color</div>
  <div class="text-bg-gradient-tinta p-3 position-relative">.text-bg-gradient-tinta with contrasting color</div>
  <div class="text-bg-gradient-cloud p-3 position-relative">.text-bg-gradient-cloud with contrasting color</div>
  <div class="text-bg-gradient-caliche p-3 position-relative">.text-bg-gradient-caliche with contrasting color</div>
  <div class="text-bg-gradient-white p-3 position-relative">.text-bg-gradient-white with contrasting color</div>
  <div class="text-bg-gradient-black p-3 position-relative">.text-bg-gradient-black with contrasting color</div>
</div>

With headings and links

Custom Arizona Bootstrap Styling

Arizona Bootstrap includes additional styling to ensure that headings and links within elements styled by a .text-bg-* class have an accessible and brand-appropriate text color as well.

Red with contrasting heading color and link color

Bougainvillea with contrasting heading color and link color

Sonoran-Red with contrasting heading color and link color

Blue with contrasting heading color and link color

Rain with contrasting heading color and link color

Arroyo-Blue with contrasting heading color and link color

Azurite with contrasting heading color and link color

Tinta with contrasting heading color and link color

Cloud with contrasting heading color and link color

Caliche with contrasting heading color and link color

Saguaro with contrasting heading color and link color

Shade with contrasting heading color and link color

Silver with contrasting heading color and link color

Brick with contrasting heading color and link color

Ash with contrasting heading color and link color

Sage with contrasting heading color and link color

White with contrasting heading color and link color

Black with contrasting heading color and link color

Primary with contrasting heading color and link color

Secondary with contrasting heading color and link color

Success with contrasting heading color and link color

Danger with contrasting heading color and link color

Warning with contrasting heading color and link color

Info with contrasting heading color and link color

Light with contrasting heading color and link color

Dark with contrasting heading color and link color

Gray 100 with contrasting heading color and link color

Gray 200 with contrasting heading color and link color

Gray 300 with contrasting heading color and link color

Gray 400 with contrasting heading color and link color

Gray 500 with contrasting heading color and link color

Gray 600 with contrasting heading color and link color

Gray 700 with contrasting heading color and link color

Gray 800 with contrasting heading color and link color

Gray 900 with contrasting heading color and link color

html

<div class="text-bg-red p-3"><h3 class="h6 my-0">Red with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-bougainvillea p-3"><h3 class="h6 my-0">Bougainvillea with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-sonoran-red p-3"><h3 class="h6 my-0">Sonoran-Red with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-blue p-3"><h3 class="h6 my-0">Blue with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-rain p-3"><h3 class="h6 my-0">Rain with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-arroyo-blue p-3"><h3 class="h6 my-0">Arroyo-Blue with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-azurite p-3"><h3 class="h6 my-0">Azurite with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-tinta p-3"><h3 class="h6 my-0">Tinta with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-cloud p-3"><h3 class="h6 my-0">Cloud with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-caliche p-3"><h3 class="h6 my-0">Caliche with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-saguaro p-3"><h3 class="h6 my-0">Saguaro with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-shade p-3"><h3 class="h6 my-0">Shade with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-silver p-3"><h3 class="h6 my-0">Silver with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-brick p-3"><h3 class="h6 my-0">Brick with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-ash p-3"><h3 class="h6 my-0">Ash with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-sage p-3"><h3 class="h6 my-0">Sage with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-white p-3"><h3 class="h6 my-0">White with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-black p-3"><h3 class="h6 my-0">Black with contrasting heading color and <a href="#top">link color</a></h3></div>

<div class="text-bg-primary p-3"><h3 class="h6 my-0">Primary with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-secondary p-3"><h3 class="h6 my-0">Secondary with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-success p-3"><h3 class="h6 my-0">Success with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-danger p-3"><h3 class="h6 my-0">Danger with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-warning p-3"><h3 class="h6 my-0">Warning with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-info p-3"><h3 class="h6 my-0">Info with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-light p-3"><h3 class="h6 my-0">Light with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-dark p-3"><h3 class="h6 my-0">Dark with contrasting heading color and <a href="#top">link color</a></h3></div>

<div class="text-bg-gray-100 p-3"><h3 class="h6 my-0">Gray 100 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-200 p-3"><h3 class="h6 my-0">Gray 200 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-300 p-3"><h3 class="h6 my-0">Gray 300 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-400 p-3"><h3 class="h6 my-0">Gray 400 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-500 p-3"><h3 class="h6 my-0">Gray 500 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-600 p-3"><h3 class="h6 my-0">Gray 600 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-700 p-3"><h3 class="h6 my-0">Gray 700 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-800 p-3"><h3 class="h6 my-0">Gray 800 with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-gray-900 p-3"><h3 class="h6 my-0">Gray 900 with contrasting heading color and <a href="#top">link color</a></h3></div>

With components

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

Saguaro Rain Brick

html

<span class="badge text-bg-saguaro">Saguaro</span>
<span class="badge text-bg-rain">Rain</span>
<span class="badge text-bg-brick">Brick</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-caliche mb-3" style="max-width: 20rem;">
  <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-sonoran-red mb-3" style="max-width: 20rem;">
  <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>