Blues

Blues do not feature heavily in the site design. They’re mainly reserved for links, buttons, and the county-level maps on state Explore pages.

$blue-dark is used for type fills over the $blue-cthru background color (on the filter panel for federal revenue by company, in How it works), to achieve sufficient contrast. $blue-cthru is semi-transparent, for use in filter backgrounds.

‘“Accessible” colors can be used as text fills over white backgrounds, since the contrast ratio between the color and white is at least 4.5:1.’

<div class="swatch">
    <div class="swatch-color bg-blue-cthru"></div>
    <div class="label-primary">$blue-cthru (filter bg)</div>
    <div class="label-secondary">rgba(198, 233, 255, 0.93)</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
</div>
<div class="swatch">
  <div class="swatch-color {{ className }}"></div>
  <div class="label-primary">${{ colorName }}</div>
  <div class="label-secondary">{{ colorCode }}</div>
  {{#if accessible }}
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
  {{else}}
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
  {{/if}}
  {{#if map }}
    <div class="label-secondary">(for maps only)</div>
  {{else}}
  {{/if}}
  {{#if notInUse }}
    <div class="label-secondary">(not in use)</div>
  {{else}}
  {{/if}}
</div>
{
  "className": "bg-blue-cthru",
  "colorName": "blue-cthru (filter bg)",
  "colorCode": "rgba(198, 233, 255, 0.93)",
  "notInUse": null,
  "map": null,
  "accessible": null
}