Colors
Use color utilities to apply color to the background of elements, text, and borders.
On this page
On this page
These utilities should only be used where color is not provided by a component. To learn more about how to apply color, read the color documentation.
Text
Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of level AA. This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this color contrast testing tool. For more information, read our accessibility standards.
You can set the color inheritance on an element by using the color-fg-inherit class.
Background
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of level AA. Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can check your color combination with this demo site. For more information, read our accessibility standards.
Border
Override default border colors with the following utilities.