Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Background Color

Use the background color utility to change the default background color of an element.

Format: .ds-u-fill--[COLOR NAME]-[SHADE]

Brand colors

Primary Colors

.ds-u-fill--primary-lightestocean-50
.ds-u-fill--primary-lighterocean-100
.ds-u-fill--primary-lightocean-300
.ds-u-fill--primaryocean-500
.ds-u-fill--primary-darkocean-600
.ds-u-fill--primary-darkerocean-700
.ds-u-fill--primary-darkestocean-800

Secondary Colors

.ds-u-fill--secondary-lightestspring-50
.ds-u-fill--secondary-lighterspring-100
.ds-u-fill--secondary-lightspring-300
.ds-u-fill--secondaryspring-500
.ds-u-fill--secondary-darkspring-600
.ds-u-fill--secondary-darkerspring-700
.ds-u-fill--secondary-darkestspring-800

Accent colors

Primary accent colors

.ds-u-fill--accent-primary-lightestpersimmon-50
.ds-u-fill--accent-primary-lighterpersimmon-100
.ds-u-fill--accent-primary-lightpersimmon-300
.ds-u-fill--accent-primarypersimmon-500
.ds-u-fill--accent-primary-darkpersimmon-600
.ds-u-fill--accent-primary-darkerpersimmon-700
.ds-u-fill--accent-primary-darkestpersimmon-800

Neutral colors

.ds-u-fill--whitewhite-solid
.ds-u-fill--gray-lightestgranite-50
.ds-u-fill--gray-lightergranite-100
.ds-u-fill--gray-lightgranite-300
.ds-u-fill--graygranite-500
.ds-u-fill--gray-darkgranite-700
.ds-u-fill--basegranite-900
.ds-u-fill--blackblack-solid

Background Colors

.ds-u-fill--backgroundwhite-solid
.ds-u-fill--background-inverseocean-800

Status colors

Informational

.ds-u-fill--info-lightestsky-50
.ds-u-fill--info-lightersky-100
.ds-u-fill--info-lightsky-300
.ds-u-fill--infosky-500
.ds-u-fill--info-darksky-600
.ds-u-fill--info-darkersky-700
.ds-u-fill--info-darkestsky-800

Success

.ds-u-fill--success-lightestspring-50
.ds-u-fill--success-lighterspring-100
.ds-u-fill--success-lightspring-300
.ds-u-fill--successspring-500
.ds-u-fill--success-darkspring-600
.ds-u-fill--success-darkerspring-700
.ds-u-fill--success-darkestspring-800

Warn

.ds-u-fill--warn-lightestgoldenrod-50
.ds-u-fill--warn-lightergoldenrod-100
.ds-u-fill--warn-lightgoldenrod-300
.ds-u-fill--warngoldenrod-500
.ds-u-fill--warn-darkgoldenrod-600
.ds-u-fill--warn-darkergoldenrod-700
.ds-u-fill--warn-darkestgoldenrod-800

Error

.ds-u-fill--error-lightestrose-50
.ds-u-fill--error-lighterrose-100
.ds-u-fill--error-lightrose-300
.ds-u-fill--errorrose-500
.ds-u-fill--error-darkrose-600
.ds-u-fill--error-darkerrose-700
.ds-u-fill--error-darkestrose-800

Focus Colors

.ds-u-fill--focus-lightwhite-solid
.ds-u-fill--focus-darkorchid-500

Additional Colors

.ds-u-fill--muted-inverselapis-50
.ds-u-fill--transparenttransparent

Accessibility considerations

Text contrast

WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.

Text over gradients and background images still need to meet contrast requirements.

Non-text contrast

Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.

Easily test your color combinations

Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast:

WebAIM Color Contrast Checker

Deque Color Contrast Analyzer

Color Contrast Analyzer by TPGi