Use color utilities to apply color to the background of elements, text, and borders.
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.
Use text color utilities to set text or Octicons 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.
These are our most common text with background color combinations. They don’t all pass accessibility standards currently, but will be updated in the future. Any of the combinations with a warning icon must be used with caution.
You can set the color inheritance on an element by using the
Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.
link-gray to turn the link color to
$text-gray and remain hover on blue.
link-gray-dark to turn the link color to
$text-gray-dark and remain hover on blue.
.muted-link to turn the link light gray in color, and blue on hover or focus with no underline.
link-hover-blue to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
Border colors are documented on the border utilities page.