--- layout: docs title: Color & background description: Set a background color with contrasting foreground color. group: helpers toc: true added: "5.2" --- ## Overview {{< added-in "5.2.0" >}} 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 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 >}} {{< text-bg.inline >}} {{- range (index $.Site.Data "theme-colors") }}
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.