DAHLIA Pattern Library

Accessibility 

<div class="row">
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-white">
            <p class="c-steel no-margin">steel on white</p>
            <p class="c-steel no-margin">#767676 on #fff</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-dust">
            <p class="c-charcoal no-margin">charcoal on dust</p>
            <p class="c-charcoal no-margin">#555 on #f5f8f9</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-dust">
            <p class="c-deep no-margin">deep on dust</p>
            <p class="c-deep no-margin">#0067be on #f5f8f9</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-oil">
            <p class="c-base no-margin">base on oil</p>
            <p class="c-base no-margin">#aaa on #333</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-steel">
            <p class="c-white no-margin">white on steel</p>
            <p class="c-white no-margin">#fff on #767676</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-dark">
            <p class="c-dust no-margin">dust on dark</p>
            <p class="c-dust no-margin">#f5f8f9 on #0d4b80</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-deep">
            <p class="c-dust no-margin">dust on deep</p>
            <p class="c-dust no-margin">#f5f8f9 on #0067be</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-primary">
            <p class="c-white no-margin">white on primary</p>
            <p class="c-white no-margin">#fff on #0077da</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-alert">
            <p class="c-white no-margin">white on alert</p>
            <p class="c-white no-margin">#fff on #e31c3d</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-success">
            <p class="c-white no-margin">white on success</p>
            <p class="c-white no-margin">#fff on #2e8540</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-warn">
            <p class="c-jet no-margin">jet on warn</p>
            <p class="c-jet no-margin">#222 on #fdb81e</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-alert-tint">
            <p class="c-jet no-margin">jet on alert-tint</p>
            <p class="c-jet no-margin">#222 on #f9d2d8</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-success-tint">
            <p class="c-jet no-margin">jet on success-tint</p>
            <p class="c-jet no-margin">#222 on #b4e5be</p>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-test padding margin-bottom bg-warn-tint">
            <p class="c-jet no-margin">jet on warn-tint</p>
            <p class="c-jet no-margin">#222 on #fee8b6</p>
        </div>
    </div>
</div>
 
<div class="row">
	{{#each color-schemes }}
	<div class="medium-4 columns">
	    <div class="color-test padding margin-bottom bg-{{ this.bg-name }}">
	      <p class="c-{{ this.text-name }} no-margin">{{ this.text-name }} on {{ this.bg-name }}</p>
	      <p class="c-{{ this.text-name }} no-margin">{{ this.text-hex }} on {{ this.bg-hex }}</p>
	    </div>
	</div>
	{{/each }}
</div>
 
{
  "color-schemes": [
    {
      "text-name": "steel",
      "text-hex": "#767676",
      "bg-name": "white",
      "bg-hex": "#fff"
    },
    {
      "text-name": "charcoal",
      "text-hex": "#555",
      "bg-name": "dust",
      "bg-hex": "#f5f8f9"
    },
    {
      "text-name": "deep",
      "text-hex": "#0067be",
      "bg-name": "dust",
      "bg-hex": "#f5f8f9"
    },
    {
      "text-name": "base",
      "text-hex": "#aaa",
      "bg-name": "oil",
      "bg-hex": "#333"
    },
    {
      "text-name": "white",
      "text-hex": "#fff",
      "bg-name": "steel",
      "bg-hex": "#767676"
    },
    {
      "text-name": "dust",
      "text-hex": "#f5f8f9",
      "bg-name": "dark",
      "bg-hex": "#0d4b80"
    },
    {
      "text-name": "dust",
      "text-hex": "#f5f8f9",
      "bg-name": "deep",
      "bg-hex": "#0067be"
    },
    {
      "text-name": "white",
      "text-hex": "#fff",
      "bg-name": "primary",
      "bg-hex": "#0077da"
    },
    {
      "text-name": "white",
      "text-hex": "#fff",
      "bg-name": "alert",
      "bg-hex": "#e31c3d"
    },
    {
      "text-name": "white",
      "text-hex": "#fff",
      "bg-name": "success",
      "bg-hex": "#2e8540"
    },
    {
      "text-name": "jet",
      "text-hex": "#222",
      "bg-name": "warn",
      "bg-hex": "#fdb81e"
    },
    {
      "text-name": "jet",
      "text-hex": "#222",
      "bg-name": "alert-tint",
      "bg-hex": "#f9d2d8"
    },
    {
      "text-name": "jet",
      "text-hex": "#222",
      "bg-name": "success-tint",
      "bg-hex": "#b4e5be"
    },
    {
      "text-name": "jet",
      "text-hex": "#222",
      "bg-name": "warn-tint",
      "bg-hex": "#fee8b6"
    }
  ]
}

These options offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios.

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.