---
layout: styleguide
title: Colors
order: 02
---

<p>USAJOBS extends the <a href="https://playbook.cio.gov/designstandards/visual-style/#colors">U.S. Web Design Standards color palette</a> with one additional secondary shade of green.</p>

<h3 class="usa-heading" id="palette">Palette</h3>

<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">
  <div class="color-big">
    <div class="usa-color-short usa-color-green-dark">
    </div>
      <p class="usa-color-hex">#2d8700</p>
      <p class="usa-color-name">green-dark</p>
  </div>
</div>

<h3 class="usa-heading" id="text-accessibility">Text Accessibility</h3>

<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>Neutrals on a colored background</h5>

<div class="usa-grid-full">
  <div class="usa-width-one-half">
    <div class="usa-color-text usa-color-green-dark usa-color-text-white">
      white on green
    </div>
  </div>
</div>