An official website of the United States Government
Overview
A flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.
Base Palette
-
Text
$color-fsa-base
-
Link, Default
$color-fsa-link
-
Link, Hover
$color-fsa-link-hover
-
Background
$color-fsa-site-bg
-
White
$color-fsa-white
Core Palette
-
Primary
$color-fsa-primary
-
Secondary
$color-fsa-secondary
-
Tertiary
$color-fsa-tertiary
Tints and Shades
-
$color-fsa-primary-900$color-fsa-primary$color-fsa-primary-300$color-fsa-primary-200$color-fsa-primary-100
-
$color-fsa-secondary-900$color-fsa-secondary$color-fsa-secondary-300$color-fsa-secondary-200$color-fsa-secondary-100
-
$color-fsa-tertiary-900$color-fsa-tertiary$color-fsa-tertiary-300$color-fsa-tertiary-200$color-fsa-tertiary-100
Accent Palette
-
Aqua
$color-fsa-aqua
-
Red
$color-fsa-red
-
Yellow
$color-fsa-yellow
Tints and Shades
-
$color-fsa-aqua-900$color-fsa-aqua$color-fsa-aqua-300$color-fsa-aqua-200$color-fsa-aqua-100
-
$color-fsa-red-900$color-fsa-red$color-fsa-red-300$color-fsa-red-200$color-fsa-red-100
-
-
(No dark yellow)
$color-fsa-yellow$color-fsa-yellow-300$color-fsa-yellow-200$color-fsa-yellow-100
-
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.
If you choose to customize beyond this palette, WebAIM Color Contrast Checker is a useful resource for testing the compliance of any color combination. Similar tools are listed in our Accessibility Guide under Resources.
Further accessibility implications covered in our Accessibility Guide under Color and Contrast