Blacks and grays

Cool grays are used widely in the site, predominantly for large background fills.

‘“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>
    <div class="swatch">
        <div class="swatch-color bg-gray-dark"></div>
        <div class="label-primary">$gray-dark</div>
        <div class="label-secondary">#768d99</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</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}}
  </div>
</div>
{
  "className": "bg-gray-dark",
  "colorName": "gray-dark",
  "colorCode": "#768d99",
  "accessible": null
}