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.

{ { < 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") } }

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

{ { < callout info }} { { < partial "callouts/warning-color-assistive-technologies.md" }} { { < /callout }}

With components#

Use them in place of combined .text-* and .bg-* classes, like on badges:

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

Or on cards:

{ {< example >} }

{ {< /example >} }