Welcome To Our Shell

Mister Spy & Souheyl Bypass Shell

---
title: Color and background
description: Set a background color with contrasting foreground color.
toc: true
added:
  version: "5.2"
---

import { getData } from '@libs/data'

## Overview

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

<Callout type="warning">
**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.
</Callout>

<Example code={getData('theme-colors').map((themeColor) => `<div class="text-bg-${themeColor.name} p-3">${themeColor.title} with contrasting color</div>`)} />

<Callout name="warning-color-assistive-technologies" />

## With components

Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]([[docsref:/components/badge#background-colors]]):

<Example code={`<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>`} />

Or on [cards]([[docsref:/components/card#background-and-color]]):

<Example code={`<div class="card text-bg-primary 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-info 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>`} />