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

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.

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

.text-bg-transparent-red with contrasting color

.text-bg-transparent-bloom with contrasting color

.text-bg-transparent-chili with contrasting color

.text-bg-transparent-blue with contrasting color

.text-bg-transparent-sky with contrasting color

.text-bg-transparent-oasis with contrasting color

.text-bg-transparent-azurite with contrasting color

.text-bg-transparent-midnight with contrasting color

.text-bg-transparent-cool-gray with contrasting color

.text-bg-transparent-warm-gray with contrasting color

.text-bg-transparent-leaf with contrasting color

.text-bg-transparent-river with contrasting color

.text-bg-transparent-silver with contrasting color

.text-bg-transparent-mesa with contrasting color

.text-bg-transparent-ash with contrasting color

.text-bg-transparent-sage with contrasting color

.text-bg-transparent-white with contrasting color

.text-bg-transparent-black with contrasting color

html

<div class="text-bg-transparent-red p-3">.text-bg-transparent-red with contrasting color</div>
<div class="text-bg-transparent-bloom p-3">.text-bg-transparent-bloom with contrasting color</div>
<div class="text-bg-transparent-chili p-3">.text-bg-transparent-chili with contrasting color</div>
<div class="text-bg-transparent-blue p-3">.text-bg-transparent-blue with contrasting color</div>
<div class="text-bg-transparent-sky p-3">.text-bg-transparent-sky with contrasting color</div>
<div class="text-bg-transparent-oasis p-3">.text-bg-transparent-oasis with contrasting color</div>
<div class="text-bg-transparent-azurite p-3">.text-bg-transparent-azurite with contrasting color</div>
<div class="text-bg-transparent-midnight p-3">.text-bg-transparent-midnight with contrasting color</div>
<div class="text-bg-transparent-cool-gray p-3">.text-bg-transparent-cool-gray with contrasting color</div>
<div class="text-bg-transparent-warm-gray p-3">.text-bg-transparent-warm-gray with contrasting color</div>
<div class="text-bg-transparent-leaf p-3">.text-bg-transparent-leaf with contrasting color</div>
<div class="text-bg-transparent-river p-3">.text-bg-transparent-river with contrasting color</div>
<div class="text-bg-transparent-silver p-3">.text-bg-transparent-silver with contrasting color</div>
<div class="text-bg-transparent-mesa p-3">.text-bg-transparent-mesa with contrasting color</div>
<div class="text-bg-transparent-ash p-3">.text-bg-transparent-ash with contrasting color</div>
<div class="text-bg-transparent-sage p-3">.text-bg-transparent-sage with contrasting color</div>
<div class="text-bg-transparent-white p-3">.text-bg-transparent-white with contrasting color</div>
<div class="text-bg-transparent-black p-3">.text-bg-transparent-black with contrasting color</div>

Gradient

Custom Arizona Bootstrap Classes

.text-bg-gradient-red with contrasting color

.text-bg-gradient-bloom with contrasting color

.text-bg-gradient-chili with contrasting color

.text-bg-gradient-blue with contrasting color

.text-bg-gradient-sky with contrasting color

.text-bg-gradient-oasis with contrasting color

.text-bg-gradient-azurite with contrasting color

.text-bg-gradient-midnight with contrasting color

.text-bg-gradient-cool-gray with contrasting color

.text-bg-gradient-warm-gray with contrasting color

.text-bg-gradient-leaf with contrasting color

.text-bg-gradient-river with contrasting color

.text-bg-gradient-silver with contrasting color

.text-bg-gradient-mesa with contrasting color

.text-bg-gradient-ash with contrasting color

.text-bg-gradient-sage with contrasting color

.text-bg-gradient-white with contrasting color

.text-bg-gradient-black with contrasting color

html

<div class="text-bg-gradient-red p-3">.text-bg-gradient-red with contrasting color</div>
<div class="text-bg-gradient-bloom p-3">.text-bg-gradient-bloom with contrasting color</div>
<div class="text-bg-gradient-chili p-3">.text-bg-gradient-chili with contrasting color</div>
<div class="text-bg-gradient-blue p-3">.text-bg-gradient-blue with contrasting color</div>
<div class="text-bg-gradient-sky p-3">.text-bg-gradient-sky with contrasting color</div>
<div class="text-bg-gradient-oasis p-3">.text-bg-gradient-oasis with contrasting color</div>
<div class="text-bg-gradient-azurite p-3">.text-bg-gradient-azurite with contrasting color</div>
<div class="text-bg-gradient-midnight p-3">.text-bg-gradient-midnight with contrasting color</div>
<div class="text-bg-gradient-cool-gray p-3">.text-bg-gradient-cool-gray with contrasting color</div>
<div class="text-bg-gradient-warm-gray p-3">.text-bg-gradient-warm-gray with contrasting color</div>
<div class="text-bg-gradient-leaf p-3">.text-bg-gradient-leaf with contrasting color</div>
<div class="text-bg-gradient-river p-3">.text-bg-gradient-river with contrasting color</div>
<div class="text-bg-gradient-silver p-3">.text-bg-gradient-silver with contrasting color</div>
<div class="text-bg-gradient-mesa p-3">.text-bg-gradient-mesa with contrasting color</div>
<div class="text-bg-gradient-ash p-3">.text-bg-gradient-ash with contrasting color</div>
<div class="text-bg-gradient-sage p-3">.text-bg-gradient-sage with contrasting color</div>
<div class="text-bg-gradient-white p-3">.text-bg-gradient-white with contrasting color</div>
<div class="text-bg-gradient-black p-3">.text-bg-gradient-black with contrasting color</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

Bloom with contrasting heading color and link color

Chili with contrasting heading color and link color

Blue with contrasting heading color and link color

Sky with contrasting heading color and link color

Oasis with contrasting heading color and link color

Azurite with contrasting heading color and link color

Midnight with contrasting heading color and link color

Cool-Gray with contrasting heading color and link color

Warm-Gray with contrasting heading color and link color

Leaf with contrasting heading color and link color

River with contrasting heading color and link color

Silver with contrasting heading color and link color

Mesa 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

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-bloom p-3"><h3 class="h6 my-0">Bloom with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-chili p-3"><h3 class="h6 my-0">Chili 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-sky p-3"><h3 class="h6 my-0">Sky with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-oasis p-3"><h3 class="h6 my-0">Oasis 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-midnight p-3"><h3 class="h6 my-0">Midnight with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-cool-gray p-3"><h3 class="h6 my-0">Cool-Gray with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-warm-gray p-3"><h3 class="h6 my-0">Warm-Gray with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-leaf p-3"><h3 class="h6 my-0">Leaf with contrasting heading color and <a href="#top">link color</a></h3></div>
<div class="text-bg-river p-3"><h3 class="h6 my-0">River 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-mesa p-3"><h3 class="h6 my-0">Mesa 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-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:

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>