UI components

Colors

A flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.

Palette

This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Primary colors

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

#0071bc

primary

#205493

primary-darker

#112e51

primary-darkest

#212121

base

#323a45

gray-dark

#aeb0b5

gray-light

#ffffff

white

Secondary colors

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

#02bfe7

primary-alt

#046b99

primary-alt-darkest

#00a6d2

primary-alt-dark

#9bdaf1

primary-alt-light

#e1f3f8

primary-alt-lightest

#e31c3d

secondary

#981b1e

secondary-darkest

#cd2026

secondary-dark

#e59393

secondary-light

#f9dede

secondary-lightest

Background colors

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

#323a45

gray-dark

#5b616b

gray

#aeb0b5

gray-light

#d6d7d9

gray-lighter

#f1f1f1

gray-lightest

#494440

gray-warm-dark

#e4e2e0

gray-warm-light

#112e51

primary-darkest

#dce4ef

gray-cool-light

Tertiary colors

These colors are used primarily for content-specific needs, such as alerts and illustrations. They should never overpower the primary colors.

#fdb81e

gold

#f9c642

gold-light

#fad980

gold-lighter

#fff1d2

gold-lightest

#2e8540

green

#4aa564

green-light

#94bfa2

green-lighter

#e7f4e4

green-lightest

#205493

cool-blue

#4773aa

cool-blue-light

#8ba6ca

cool-blue-lighter

#dce4ef

cool-blue-lightest

Special state colors

#3e94cf

focus

#4c2c92

visited

Text accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.

If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.

Fully accessible combinations

Colors on a white background
primary-darkest on white
primary-darker on white
primary on white
cool-blue-light on white
primary-alt-darkest on white
green on white
visited on white
base on white
gray-dark on white
gray on white
gray-warm-dark on white
secondary-darkest on white
secondary-dark on white
secondary on white
Neutrals on a colored background
white on base
white on gray-warm-dark
white on gray-dark
white on gray
white on primary-darkest
white on primary-darker
white on primary
white on cool-blue-light
white on primary-alt-darkest
base on primary-alt-dark
base on primary-alt
white on green
base on green-light
base on gold
base on gold-light
white on secondary-darkest
white on secondary-dark
white on secondary
base on gray-light
base on gray-lighter
base on gray-warm-light
base on cool-blue-lighter
base on cool-blue-lightest
base on primary-alt-lightest
base on green-lighter
base on green-lightest
base on gold-lighter
base on gold-lightest
base on secondary-lightest