color-background.md

layout	title	description	group	aliases	toc	added
docs	Color & background	Set a background color with contrasting foreground color.	helpers	/docs/helpers/color-background/	true	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") }}

{{ .name | title }} with contrasting color

{{- end -}} {{< /text-bg.inline >}} {{< /example >}}

With components

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

{{< example >}} Primary Info {{< /example >}}

Or on [cards]({{< docsref "/components/card#background-and-color" >}}):

{{< example >}}

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.

{{< /example >}}