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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). 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](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). 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](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
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**.
### Text on white background
```html
<divclass="text-blue mb-2">
.text-blue on white
</div>
<divclass="text-gray-dark mb-2">
.text-gray-dark on white
</div>
<divclass="text-gray mb-2">
.text-gray on white
</div>
<divclass="text-red mb-2">
.text-red on white
</div>
<divclass="text-orange mb-2">
.text-orange on white
</div>
<spanclass="float-left text-red tooltipped tooltipped-n"aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<divclass="text-orange-light mb-2">
.text-orange-light on white
</div>
<spanclass="float-left text-red tooltipped tooltipped-n"aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<divclass="text-green mb-2 ml-4">
.text-green on white
</div>
<divclass="text-purple mb-2">
.text-purple on white
</div>
```
### Text on colored backgrounds
```html
<divclass="text-white bg-blue mb-2">
.text-white on .bg-blue
</div>
<divclass="bg-blue-light mb-2">
.text-gray-dark on .bg-blue-light
</div>
<divclass="text-white bg-red mb-2">
.text-white on .bg-red
</div>
<divclass="text-red bg-red-light mb-2">
.text-red on .bg-red-light
</div>
<divclass="bg-green-light mb-2">
.text-gray-dark on .bg-green-light
</div>
<divclass="bg-yellow mb-2">
.text-gray-dark on .bg-yellow
</div>
<divclass="bg-yellow-light mb-2">
.text-gray-dark on .bg-yellow-light
</div>
<divclass="text-white bg-purple mb-2">
.text-white on .bg-purple
</div>
<divclass="text-white bg-gray-dark mb-2">
.text-white on .bg-gray-dark
</div>
<divclass="bg-gray">
.text-gray-dark on .bg-gray
</div>
```
## Link colors
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.**
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
```html
<aclass="link-gray"href="#url">link-gray</a>
```
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
```html
<aclass="muted-link"href="#url">muted-link</a>
```
Use `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.
```html
<aclass="text-gray-dark no-underline"href="#url">
A link with only part of it is <spanclass="link-hover-blue">blue on hover</span>.
