---
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={`Primary
Info`} />

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

<Example code={`
    
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.

`} />
