Skip to content

Colors

Use color utilities to apply color to the background of elements, text, and borders.
Please note Primer CSS v18 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date.

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 in the interface guidelines.

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.

View in Storybook

You can set the color inheritance on an element by using the color-fg-inherit class.

View in Storybook

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.

View in Storybook

Border

Override default border colors with the following utilities.

View in Storybook

You can use the Link component to change the link colors.