Colors

<h4 class="usa-heading">City colors</h4>

<p>The city colors derive from the official City Seal and City Municipal Flag. They cannot be altered and are an essential part of the city's identity. In usage, however, it should be noted that the flag blue does not provide sufficient color cotrast with
    text (WCAG 2.0 AA standards).</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-primary">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#2C5491</p>
            <p class="usa-color-name">$color-primary (seal blue)</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-primary-darker usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#244473</p>
            <p class="usa-color-name">$color-primary-darker</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-primary-darkest">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#112e51</p>
            <p class="usa-color-name">$color-primary-darkest</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-base usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#212121</p>
            <p class="usa-color-name">$color-base</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-flag-blue">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#5E9AC8</p>
            <p class="usa-color-name">$color-flag-blue</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-flag-red usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#BA2E3A</p>
            <p class="usa-color-name">$color-flag-red</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-seal-ring-blue">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#005488</p>
            <p class="usa-color-name">$color-seal-ring-blue</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-seal-sky-blue usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#71C8E6</p>
            <p class="usa-color-name">$color-seal-sky-blue </p>
        </div>
    </div>
    <div class="usa-color-square usa-color-seal-ship-brown">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#9A574B</p>
            <p class="usa-color-name">$color-seal-ship-brown </p>
        </div>
    </div>
    <div class="usa-color-square usa-color-seal-banner-red usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#D8232A</p>
            <p class="usa-color-name">$color-seal-banner-red</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-seal-green">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#009949</p>
            <p class="usa-color-name">$color-seal-green</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-seal-yellow  usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#FFF101</p>
            <p class="usa-color-name">$color-seal-yellow</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-seal-beige usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#F5C4AD</p>
            <p class="usa-color-name">$color-seal-beige</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-base">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#212121</p>
            <p class="usa-color-name">$color-base</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-dark usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#323a45</p>
            <p class="usa-color-name">$color-gray-dark</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-light">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#aeb0b5</p>
            <p class="usa-color-name">$color-gray-light</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-white usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#ffffff</p>
            <p class="usa-color-name">$color-white</p>
        </div>
    </div>
</div>

<h4 class="usa-heading">Secondary colors</h4>

<p>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.</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-primary-alt">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#02bfe7</p>
            <p class="usa-color-name">$color-primary-alt</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-primary-alt-darkest usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#046b99</p>
            <p class="usa-color-name">$color-primary-alt-darkest</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-primary-alt-dark">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#00a6d2</p>
            <p class="usa-color-name">$color-primary-alt-dark</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-primary-alt-light usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#9bdaf1</p>
            <p class="usa-color-name">$color-primary-alt-light</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-primary-alt-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#e1f3f8</p>
            <p class="usa-color-name">$color-primary-alt-lightest</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-secondary">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#BA2E3A</p>
            <p class="usa-color-name">$color-secondary (flag red)</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-secondary-darkest usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#981b1e</p>
            <p class="usa-color-name">$color-secondary-darkest</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-secondary-dark">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#A02A34</p>
            <p class="usa-color-name">$color-secondary-dark</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-secondary-light usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#D68289</p>
            <p class="usa-color-name">$color-primary-secondary-light</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-secondary-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#F8EAEB</p>
            <p class="usa-color-name">$color-secondary-lightest</p>
        </div>
    </div>
</div>

<h4 class="usa-heading">Background colors</h4>

<p>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.</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-gray-dark">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#323a45</p>
            <p class="usa-color-name">$color-gray-dark</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#5b616b</p>
            <p class="usa-color-name">$color-gray</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-light">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#aeb0b5</p>
            <p class="usa-color-name">$color-gray-light</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-lighter usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#d6d7d9</p>
            <p class="usa-color-name">$color-gray-lighter</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-gray-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#f1f1f1</p>
            <p class="usa-color-name">$color-gray-lightest</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-gray-warm-dark">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#494440</p>
            <p class="usa-color-name">$color-gray-warm-dark</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-warm-light usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#e4e2e0</p>
            <p class="usa-color-name">$color-gray-warm-light</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-primary-darkest">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#112e51</p>
            <p class="usa-color-name">$color-primary-darkest</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gray-cool-light usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#dce4ef</p>
            <p class="usa-color-name">$color-gray-cool-light</p>
        </div>
    </div>
</div>

<h4 class="usa-heading">Tertiary colors</h4>

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

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-gold">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#DCB13C</p>
            <p class="usa-color-name">$color-gold</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gold-light usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#E3C163</p>
            <p class="usa-color-name">$color-gold-light</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gold-lighter">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#EAD08A</p>
            <p class="usa-color-name">$color-gold-lighter</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-gold-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#F8EFD8</p>
            <p class="usa-color-name">$color-gold-lightest</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-green">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#339D61</p>
            <p class="usa-color-name">$color-green</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-green-light usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#5EC88C</p>
            <p class="usa-color-name">$color-green-light</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-green-lighter">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#9EDEBA</p>
            <p class="usa-color-name">$color-green-lighter</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-green-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#DFF4E8</p>
            <p class="usa-color-name">$color-green-lightest</p>
        </div>
    </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-purple">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#BD5190</p>
            <p class="usa-color-name">$color-purple</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-purple-light usa-mobile-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#E672B6</p>
            <p class="usa-color-name">$color-purple-light</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-purple-lighter">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#F0AAD3</p>
            <p class="usa-color-name">$color-purple-lighter</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-purple-lightest usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#FAE3F0</p>
            <p class="usa-color-name">$color-purple-lightest</p>
        </div>
    </div>
</div>

<h4 class="usa-heading">Special state colors</h4>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
    <div class="usa-color-square usa-color-focus">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#aeb0b5</p>
            <p class="usa-color-name">$color-focus</p>
        </div>
    </div>
    <div class="usa-color-square usa-color-visited usa-end-row">
        <div class="usa-color-inner-content">
            <p class="usa-color-hex">#4c2c92</p>
            <p class="usa-color-name">$color-visited</p>
        </div>
    </div>
</div>

<h2 class="usa-heading heading-margin-alt" id="text-accessibility">Text accessibility</h2>

<p>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 <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">at least 4.5:1</a>.
    This ensures that viewers who cannot see the full color spectrum are able to read the text.</p>
<p>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.</p>
<p>If you choose to customize beyond this palette, this <a href="http://webaim.org/resources/contrastchecker/">color contrast tool</a> is a useful resource for testing the compliance of any color combination.</p>
<h4 class="usa-heading">Fully accessible combinations</h4>

<h5>Colors on a white background</h5>

<div class="usa-grid-full usa-color-outline">
    <div class="usa-width-one-half">
        <div class="usa-color-text usa-color-text-primary-darkest">
            primary-darkest on white
        </div>
        <div class="usa-color-text usa-color-text-primary-darker">
            primary-darker on white
        </div>
        <div class="usa-color-text usa-color-text-primary">
            primary on white
        </div>
        <div class="usa-color-text usa-color-text-cool-blue-light">
            cool-blue-light on white
        </div>
        <div class="usa-color-text usa-color-text-primary-alt-darkest">
            primary-alt-darkest on white
        </div>
        <div class="usa-color-text usa-color-text-green">
            green on white
        </div>
        <div class="usa-color-text usa-color-text-visited">
            visited on white
        </div>
    </div>
    <div class="usa-width-one-half usa-end-row">
        <div class="usa-color-text usa-color-text-gray-dark">
            base on white
        </div>
        <div class="usa-color-text usa-color-text-gray-dark">
            gray-dark on white
        </div>
        <div class="usa-color-text usa-color-text-gray">
            gray on white
        </div>
        <div class="usa-color-text usa-color-text-gray-warm-dark">
            gray-warm-dark on white
        </div>
        <div class="usa-color-text usa-color-text-secondary-darkest">
            secondary-darkest on white
        </div>
        <div class="usa-color-text usa-color-text-secondary-dark">
            secondary-dark on white
        </div>
        <div class="usa-color-text usa-color-text-secondary">
            secondary on white
        </div>
    </div>
</div>

<h5>Neutrals on a colored background</h5>

<div class="usa-grid-full">
    <div class="usa-width-one-half">
        <div class="usa-color-text usa-color-base usa-color-text-white">
            white on base
        </div>
        <div class="usa-color-text usa-color-gray-warm-dark usa-color-text-white">
            white on gray-warm-dark
        </div>
        <div class="usa-color-text usa-color-gray-dark usa-color-text-white">
            white on gray-dark
        </div>
        <div class="usa-color-text usa-color-gray usa-color-text-white">
            white on gray
        </div>
        <div class="usa-color-text usa-color-primary-darkest usa-color-text-white">
            white on primary-darkest
        </div>
        <div class="usa-color-text usa-color-primary-darker usa-color-text-white">
            white on primary-darker
        </div>
        <div class="usa-color-text usa-color-primary usa-color-text-white">
            white on primary
        </div>
        <div class="usa-color-text usa-color-cool-blue-light usa-color-text-white">
            white on cool-blue-light
        </div>
        <div class="usa-color-text usa-color-primary-alt-darkest usa-color-text-white">
            white on primary-alt-darkest
        </div>
        <div class="usa-color-text usa-color-primary-alt-dark">
            base on primary-alt-dark
        </div>
        <div class="usa-color-text usa-color-primary-alt">
            base on primary-alt
        </div>
        <div class="usa-color-text usa-color-green usa-color-text-white">
            white on green
        </div>
        <div class="usa-color-text usa-color-green-light">
            base on green-light
        </div>
        <div class="usa-color-text usa-color-gold">
            base on gold
        </div>
        <div class="usa-color-text usa-color-gold-light">
            base on gold-light
        </div>
        <div class="usa-color-text usa-color-purple">
            base on pruple
        </div>
        <div class="usa-color-text usa-color-purple-light">
            base on purple-light
        </div>
        <div class="usa-color-text usa-color-secondary-darkest usa-color-text-white">
            white on secondary-darkest
        </div>
        <div class="usa-color-text usa-color-secondary-dark usa-color-text-white">
            white on secondary-dark
        </div>
        <div class="usa-color-text usa-color-secondary usa-color-text-white">
            white on secondary
        </div>
    </div>
    <div class="usa-width-one-half usa-end-row">
        <div class="usa-color-text usa-color-gray-light">
            base on gray-light
        </div>
        <div class="usa-color-text usa-color-gray-lighter">
            base on gray-lighter
        </div>
        <div class="usa-color-text usa-color-gray-warm-light">
            base on gray-warm-light
        </div>
        <div class="usa-color-text usa-color-cool-blue-lighter">
            base on cool-blue-lighter
        </div>
        <div class="usa-color-text usa-color-cool-blue-lightest">
            base on cool-blue-lightest
        </div>
        <div class="usa-color-text usa-color-primary-alt-lightest">
            base on primary-alt-lightest
        </div>
        <div class="usa-color-text usa-color-green-lighter">
            base on green-lighter
        </div>
        <div class="usa-color-text usa-color-green-lightest">
            base on green-lightest
        </div>
        <div class="usa-color-text usa-color-gold-lighter">
            base on gold-lighter
        </div>
        <div class="usa-color-text usa-color-gold-lightest">
            base on gold-lightest
        </div>
        <div class="usa-color-text usa-color-secondary-lightest">
            base on secondary-lightest
        </div>
    </div>
</div>

There are no notes for this item.

<h4 class="usa-heading">City colors</h4>

<p>The city colors derive from the official City Seal and City Municipal Flag. They cannot be altered and are an essential part of the city's identity. In usage, however, it should be noted that the flag blue does not provide sufficient color cotrast with text (WCAG 2.0 AA standards).</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-primary">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#2C5491</p>
      <p class="usa-color-name">$color-primary (seal blue)</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-primary-darker usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#244473</p>
      <p class="usa-color-name">$color-primary-darker</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-primary-darkest">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#112e51</p>
      <p class="usa-color-name">$color-primary-darkest</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-base usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#212121</p>
      <p class="usa-color-name">$color-base</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-flag-blue">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#5E9AC8</p>
      <p class="usa-color-name">$color-flag-blue</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-flag-red usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#BA2E3A</p>
      <p class="usa-color-name">$color-flag-red</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-seal-ring-blue">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#005488</p>
      <p class="usa-color-name">$color-seal-ring-blue</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-seal-sky-blue usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#71C8E6</p>
      <p class="usa-color-name">$color-seal-sky-blue </p>
    </div>
  </div>
  <div class="usa-color-square usa-color-seal-ship-brown">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#9A574B</p>
      <p class="usa-color-name">$color-seal-ship-brown </p>
    </div>
  </div>
  <div class="usa-color-square usa-color-seal-banner-red usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#D8232A</p>
      <p class="usa-color-name">$color-seal-banner-red</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-seal-green">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#009949</p>
      <p class="usa-color-name">$color-seal-green</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-seal-yellow  usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#FFF101</p>
      <p class="usa-color-name">$color-seal-yellow</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-seal-beige usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#F5C4AD</p>
      <p class="usa-color-name">$color-seal-beige</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-base">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#212121</p>
      <p class="usa-color-name">$color-base</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-dark usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#323a45</p>
      <p class="usa-color-name">$color-gray-dark</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-light">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#aeb0b5</p>
      <p class="usa-color-name">$color-gray-light</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-white usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#ffffff</p>
      <p class="usa-color-name">$color-white</p>
    </div>
  </div>
</div>

<h4 class="usa-heading">Secondary colors</h4>

<p>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.</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-primary-alt">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#02bfe7</p>
      <p class="usa-color-name">$color-primary-alt</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-primary-alt-darkest usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#046b99</p>
      <p class="usa-color-name">$color-primary-alt-darkest</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-primary-alt-dark">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#00a6d2</p>
      <p class="usa-color-name">$color-primary-alt-dark</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-primary-alt-light usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#9bdaf1</p>
      <p class="usa-color-name">$color-primary-alt-light</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-primary-alt-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#e1f3f8</p>
      <p class="usa-color-name">$color-primary-alt-lightest</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-secondary">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#BA2E3A</p>
      <p class="usa-color-name">$color-secondary (flag red)</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-secondary-darkest usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#981b1e</p>
      <p class="usa-color-name">$color-secondary-darkest</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-secondary-dark">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#A02A34</p>
      <p class="usa-color-name">$color-secondary-dark</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-secondary-light usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#D68289</p>
      <p class="usa-color-name">$color-primary-secondary-light</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-secondary-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#F8EAEB</p>
      <p class="usa-color-name">$color-secondary-lightest</p>
    </div>
  </div>
</div>

<h4 class="usa-heading">Background colors</h4>

<p>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.</p>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-gray-dark">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#323a45</p>
      <p class="usa-color-name">$color-gray-dark</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#5b616b</p>
      <p class="usa-color-name">$color-gray</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-light">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#aeb0b5</p>
      <p class="usa-color-name">$color-gray-light</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-lighter usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#d6d7d9</p>
      <p class="usa-color-name">$color-gray-lighter</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-gray-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#f1f1f1</p>
      <p class="usa-color-name">$color-gray-lightest</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-gray-warm-dark">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#494440</p>
      <p class="usa-color-name">$color-gray-warm-dark</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-warm-light usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#e4e2e0</p>
      <p class="usa-color-name">$color-gray-warm-light</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-primary-darkest">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#112e51</p>
      <p class="usa-color-name">$color-primary-darkest</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gray-cool-light usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#dce4ef</p>
      <p class="usa-color-name">$color-gray-cool-light</p>
    </div>
  </div>
</div>

<h4 class="usa-heading">Tertiary colors</h4>

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

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-gold">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#DCB13C</p>
      <p class="usa-color-name">$color-gold</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gold-light usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#E3C163</p>
      <p class="usa-color-name">$color-gold-light</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gold-lighter">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#EAD08A</p>
      <p class="usa-color-name">$color-gold-lighter</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-gold-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#F8EFD8</p>
      <p class="usa-color-name">$color-gold-lightest</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-green">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#339D61</p>
      <p class="usa-color-name">$color-green</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-green-light usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#5EC88C</p>
      <p class="usa-color-name">$color-green-light</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-green-lighter">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#9EDEBA</p>
      <p class="usa-color-name">$color-green-lighter</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-green-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#DFF4E8</p>
      <p class="usa-color-name">$color-green-lightest</p>
    </div>
  </div>
</div>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-purple">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#BD5190</p>
      <p class="usa-color-name">$color-purple</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-purple-light usa-mobile-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#E672B6</p>
      <p class="usa-color-name">$color-purple-light</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-purple-lighter">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#F0AAD3</p>
      <p class="usa-color-name">$color-purple-lighter</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-purple-lightest usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#FAE3F0</p>
      <p class="usa-color-name">$color-purple-lightest</p>
    </div>
  </div>
</div>

<h4 class="usa-heading">Special state colors</h4>

<div class="usa-grid-full usa-color-row usa-primary-color-section">
  <div class="usa-color-square usa-color-focus">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#aeb0b5</p>
      <p class="usa-color-name">$color-focus</p>
    </div>
  </div>
  <div class="usa-color-square usa-color-visited usa-end-row">
    <div class="usa-color-inner-content">
      <p class="usa-color-hex">#4c2c92</p>
      <p class="usa-color-name">$color-visited</p>
    </div>
  </div>
</div>

<h2 class="usa-heading heading-margin-alt" id="text-accessibility">Text accessibility</h2>
  
  <p>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 <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">at least 4.5:1</a>. This ensures that viewers who cannot see the full color spectrum are able to read the text.</p>
<p>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.</p>
<p>If you choose to customize beyond this palette, this <a href="http://webaim.org/resources/contrastchecker/">color contrast tool</a> is a useful resource for testing the compliance of any color combination.</p>
<h4 class="usa-heading">Fully accessible combinations</h4>

<h5>Colors on a white background</h5>

<div class="usa-grid-full usa-color-outline">
  <div class="usa-width-one-half">
    <div class="usa-color-text usa-color-text-primary-darkest">
      primary-darkest on white
    </div>
    <div class="usa-color-text usa-color-text-primary-darker">
      primary-darker on white
    </div>
    <div class="usa-color-text usa-color-text-primary">
      primary on white
    </div>
    <div class="usa-color-text usa-color-text-cool-blue-light">
      cool-blue-light on white
    </div>
    <div class="usa-color-text usa-color-text-primary-alt-darkest">
      primary-alt-darkest on white
    </div>
    <div class="usa-color-text usa-color-text-green">
      green on white
    </div>
    <div class="usa-color-text usa-color-text-visited">
      visited on white
    </div>
  </div>
  <div class="usa-width-one-half usa-end-row">
    <div class="usa-color-text usa-color-text-gray-dark">
      base on white
    </div>
    <div class="usa-color-text usa-color-text-gray-dark">
      gray-dark on white
    </div>
    <div class="usa-color-text usa-color-text-gray">
      gray on white
    </div>
    <div class="usa-color-text usa-color-text-gray-warm-dark">
      gray-warm-dark on white
    </div>
    <div class="usa-color-text usa-color-text-secondary-darkest">
      secondary-darkest on white
    </div>
    <div class="usa-color-text usa-color-text-secondary-dark">
      secondary-dark on white
    </div>
    <div class="usa-color-text usa-color-text-secondary">
      secondary on white
    </div>
  </div>
</div>

<h5>Neutrals on a colored background</h5>

<div class="usa-grid-full">
  <div class="usa-width-one-half">
    <div class="usa-color-text usa-color-base usa-color-text-white">
      white on base
    </div>
    <div class="usa-color-text usa-color-gray-warm-dark usa-color-text-white">
      white on gray-warm-dark
    </div>
    <div class="usa-color-text usa-color-gray-dark usa-color-text-white">
      white on gray-dark
    </div>
    <div class="usa-color-text usa-color-gray usa-color-text-white">
      white on gray
    </div>
    <div class="usa-color-text usa-color-primary-darkest usa-color-text-white">
      white on primary-darkest
    </div>
    <div class="usa-color-text usa-color-primary-darker usa-color-text-white">
      white on primary-darker
    </div>
    <div class="usa-color-text usa-color-primary usa-color-text-white">
      white on primary
    </div>
    <div class="usa-color-text usa-color-cool-blue-light usa-color-text-white">
      white on cool-blue-light
    </div>
    <div class="usa-color-text usa-color-primary-alt-darkest usa-color-text-white">
      white on primary-alt-darkest
    </div>
    <div class="usa-color-text usa-color-primary-alt-dark">
      base on primary-alt-dark
    </div>
    <div class="usa-color-text usa-color-primary-alt">
      base on primary-alt
    </div>
    <div class="usa-color-text usa-color-green usa-color-text-white">
      white on green
    </div>
    <div class="usa-color-text usa-color-green-light">
      base on green-light
    </div>
    <div class="usa-color-text usa-color-gold">
      base on gold
    </div>
    <div class="usa-color-text usa-color-gold-light">
      base on gold-light
    </div>
    <div class="usa-color-text usa-color-purple">
      base on pruple
    </div>
    <div class="usa-color-text usa-color-purple-light">
      base on purple-light
    </div>
    <div class="usa-color-text usa-color-secondary-darkest usa-color-text-white">
      white on secondary-darkest
    </div>
    <div class="usa-color-text usa-color-secondary-dark usa-color-text-white">
      white on secondary-dark
    </div>
    <div class="usa-color-text usa-color-secondary usa-color-text-white">
      white on secondary
    </div>
  </div>
  <div class="usa-width-one-half usa-end-row">
    <div class="usa-color-text usa-color-gray-light">
      base on gray-light
    </div>
    <div class="usa-color-text usa-color-gray-lighter">
      base on gray-lighter
    </div>
    <div class="usa-color-text usa-color-gray-warm-light">
      base on gray-warm-light
    </div>
    <div class="usa-color-text usa-color-cool-blue-lighter">
      base on cool-blue-lighter
    </div>
    <div class="usa-color-text usa-color-cool-blue-lightest">
      base on cool-blue-lightest
    </div>
    <div class="usa-color-text usa-color-primary-alt-lightest">
      base on primary-alt-lightest
    </div>
    <div class="usa-color-text usa-color-green-lighter">
      base on green-lighter
    </div>
    <div class="usa-color-text usa-color-green-lightest">
      base on green-lightest
    </div>
    <div class="usa-color-text usa-color-gold-lighter">
      base on gold-lighter
    </div>
    <div class="usa-color-text usa-color-gold-lightest">
      base on gold-lightest
    </div>
    <div class="usa-color-text usa-color-secondary-lightest">
      base on secondary-lightest
    </div>
  </div>
</div>
package:
  name: uswds
  version: 1.6.7
uswds:
  path: ../../dist