<h1 class="frctl-h1" style="margin-bottom: 50px; padding: 20px 30px;">Colors</h1>
<div class="color-block-group">
<h2 class="frctl-h2">Brand Colors</h2>
<div class="color-blocks">
<div class="color-blocks__inner">
<div class="color-block">
<div class="color-block__tile" style="background-color: #ffffff"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-white</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#ffffff</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-white</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-white</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-white</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #111111"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-black</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#111111</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-black</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-black</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-black</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #4D4D4F"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-charcoal</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#4D4D4F</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-charcoal</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-charcoal</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-charcoal</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #F3F3F3"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-charcoal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#F3F3F3</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-charcoal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-charcoal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-charcoal-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #C34737"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-reef</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#C34737</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-reef</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-reef</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-reef</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #FDF4F0"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-reef-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#FDF4F0</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-reef-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-reef-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-reef-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #006D85"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-teal</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#006D85</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-teal</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-teal</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-teal</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #F1FAFF"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-teal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#F1FAFF</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-teal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-teal-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-teal-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #720565"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-plum</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#720565</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-plum</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-plum</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-plum</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #F8F2FC"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-plum-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#F8F2FC</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-plum-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-plum-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-plum-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #1B776C"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-ocean</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#1B776C</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ocean</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-ocean</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-ocean</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #F0F9F6"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-ocean-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#F0F9F6</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ocean-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-ocean-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-ocean-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #2B384D"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-navy</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#2B384D</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-navy</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-navy</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-navy</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: #FFFBF0"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$c-navy-light</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">#FFFBF0</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-navy-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-c-navy-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-c-navy-light</code></div>
</div>
</div>
</div>
</div>
<div class="color-block-group">
<h2 class="frctl-h2">Color Theme Variables</h2>
<p style="padding: 0 3rem;">Color theme colors are dependant on css variables which will change based on page and scroll patterns. More defined in the color themes documentation.</p>
<div class="color-blocks">
<div class="color-blocks__inner">
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-bkg)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-bkg</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-bkg)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-bkg</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-bkg</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-bkg</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-txt)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-txt</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-txt)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-txt</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-txt</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-txt</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-dark)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-dark</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-dark)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-dark</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-dark</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-dark</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-light)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-light</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-light)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-text-on-light)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-text-on-light</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-text-on-light)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-text-on-light</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-text-on-light</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-text-on-light</code></div>
</div>
<div class="color-block">
<div class="color-block__tile" style="background-color: var(--ct-text-on-dark)"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">$ct-text-on-dark</code></div>
<div class="color-block__name"><span class="fractal-label">CSS Variable:</span> <code class="fractal-code">var(--ct-text-on-dark)</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-ct-text-on-dark</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-ct-text-on-dark</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-ct-text-on-dark</code></div>
</div>
</div>
</div>
</div>
<div id="color-test-top" class="color-test">
<h2 class="frctl-h2">Color Accessibility Checks - Matrix</h2>
<div style="margin-top: 40px; margin-bottom: 40px;">
<h3 class="frctl-h3" id="color-matrix-details">About the Tests</h3>
<p>Color ratios are tested for AA and AAA.</p>
<ul aria-labelledby="color-matrix-details">
<li>
<p>Tests marked as "Pass" meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.</p>
</li>
<li>
<p>Tests marked as "DNP" <i>do not</i> meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.</p>
</li>
<li>
<p>Tests with "AA" only pass WCAG 2.1 AA standards.</p>
</li>
</ul>
</div>
<div class="color-matrix">
<table class="color-matrix__table">
<thead class="color-matrix__row color-matrix__row--header">
<tr>
<th id="color-name" class="color-matrix__self color-matrix__corner color-matrix__stick-left color-matrix__stick-top">
<h3>Text Color</h3>
</th>
<th id="color-on-1" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-white</h4>
<p>#FFFFFF</p>
</div>
</th>
<th id="color-on-2" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-black</h4>
<p>#111111</p>
</div>
</th>
<th id="color-on-3" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-charcoal</h4>
<p>#4D4D4F</p>
</div>
</th>
<th id="color-on-4" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-charcoal-light</h4>
<p>#F3F3F3</p>
</div>
</th>
<th id="color-on-5" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-reef</h4>
<p>#C34737</p>
</div>
</th>
<th id="color-on-6" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-reef-light</h4>
<p>#FDF4F0</p>
</div>
</th>
<th id="color-on-7" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-teal</h4>
<p>#006D85</p>
</div>
</th>
<th id="color-on-8" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-teal-light</h4>
<p>#F1FAFF</p>
</div>
</th>
<th id="color-on-9" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-plum</h4>
<p>#720565</p>
</div>
</th>
<th id="color-on-10" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-plum-light</h4>
<p>#F8F2FC</p>
</div>
</th>
<th id="color-on-11" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-ocean</h4>
<p>#1B776C</p>
</div>
</th>
<th id="color-on-12" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-ocean-light</h4>
<p>#F0F9F6</p>
</div>
</th>
<th id="color-on-13" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-navy</h4>
<p>#2B384D</p>
</div>
</th>
<th id="color-on-14" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>$c-navy-light</h4>
<p>#FFFBF0</p>
</div>
</th>
</tr>
</thead>
<tbody class="color-matrix__table-body">
<tr id="result-c-white" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-white</h4>
<p>#FFFFFF</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>18.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>8.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFFFF; color: #C34737">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>4.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFFFF; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>5.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>10.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFFFF; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>5.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>11.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #FFFFFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFFFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-black" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-black</h4>
<p>#111111</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFFFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>18.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>2.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F3F3F3">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>17</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>3.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FDF4F0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>17.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>3.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F1FAFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>17.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>1.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F8F2FC">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>17.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>3.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F0F9F6">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>17.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>1.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #111111">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFBF0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #111111"><span class="u-sr-only">Contrast ratio </span>18.2</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-charcoal" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-charcoal</h4>
<p>#4D4D4F</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFFFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>8.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>2.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F3F3F3">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>7.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>1.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FDF4F0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>7.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>1.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F1FAFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>7.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>1.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F8F2FC">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>7.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>1.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F0F9F6">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>7.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>1.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #4D4D4F">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFBF0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #4D4D4F"><span class="u-sr-only">Contrast ratio </span>8.1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-charcoal-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-charcoal-light</h4>
<p>#F3F3F3</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>17</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>7.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>4.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F3F3F3; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>5.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>9.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F3F3F3; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>4.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>10.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #F3F3F3">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F3F3F3"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-reef" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-reef</h4>
<p>#C34737</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #C34737; color: #FFFFFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>3.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>1.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #C34737; color: #FDF4F0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>1.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #C34737; color: #F1FAFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>2.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #C34737; color: #F0F9F6">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>2.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #C34737">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #C34737; color: #FFFBF0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #C34737"><span class="u-sr-only">Contrast ratio </span>4.7</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-reef-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-reef-light</h4>
<p>#FDF4F0</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>17.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>7.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FDF4F0; color: #C34737">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>4.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FDF4F0; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>5.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>10</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FDF4F0; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>4.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>10.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #FDF4F0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FDF4F0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-teal" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-teal</h4>
<p>#006D85</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #FFFFFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>3.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>1.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #F3F3F3">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>1.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #FDF4F0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #F1FAFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>1.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #F8F2FC">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>1.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #F0F9F6">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>1.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #006D85">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #006D85; color: #FFFBF0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #006D85"><span class="u-sr-only">Contrast ratio </span>5.7</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-teal-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-teal-light</h4>
<p>#F1FAFF</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>17.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>7.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F1FAFF; color: #C34737">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>4.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F1FAFF; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>5.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>10.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F1FAFF; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>11.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #F1FAFF">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F1FAFF"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-plum" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-plum</h4>
<p>#720565</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFFFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>10.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>1.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>1.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F3F3F3">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>9.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>2.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FDF4F0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>10</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>1.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F1FAFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>10.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F8F2FC">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>9.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F0F9F6">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>10.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #720565">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFBF0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #720565"><span class="u-sr-only">Contrast ratio </span>10.5</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-plum-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-plum-light</h4>
<p>#F8F2FC</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>17.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>7.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>4.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F8F2FC; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>5.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>9.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F8F2FC; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>4.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>10.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #F8F2FC">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F8F2FC"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-ocean" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-ocean</h4>
<p>#1B776C</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #FFFFFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>5.3</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>3.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>1.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #F3F3F3">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>4.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #FDF4F0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>4.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>1.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #F1FAFF">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #F8F2FC">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>4.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #F0F9F6">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #2B384D">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>2.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #1B776C">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #1B776C; color: #FFFBF0">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #1B776C"><span class="u-sr-only">Contrast ratio </span>5.2</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-ocean-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-ocean-light</h4>
<p>#F0F9F6</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>17.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>7.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F0F9F6; color: #C34737">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>4.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F0F9F6; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>5.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>10.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #F0F9F6; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>11</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #F0F9F6">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFBF0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #F0F9F6"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-navy" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-navy</h4>
<p>#2B384D</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFFFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>11.8</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #111111">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>1.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #4D4D4F">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>1.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F3F3F3">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>10.6</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #C34737">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>2.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FDF4F0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>10.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #006D85">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>1.9</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F1FAFF">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>11.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #720565">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F8F2FC">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>10.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #1B776C">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>2.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #F0F9F6">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>11</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #FFFBF0">
<div class="color-matrix__swatch-text">
<p style="color: #2B384D">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #FFFBF0">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #2B384D"><span class="u-sr-only">Contrast ratio </span>11.4</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr id="result-c-navy-light" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>$c-navy-light</h4>
<p>#FFFBF0</p>
</th>
<td headers="color-on-1">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FFFFFF">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FFFFFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-2">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #111111">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #111111">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>18.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-3">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #4D4D4F">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #4D4D4F">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>8.1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-4">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F3F3F3">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F3F3F3">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-5">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #C34737">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFBF0; color: #C34737">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>4.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-6">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #FDF4F0">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #FDF4F0">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-7">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #006D85">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFBF0; color: #006D85">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>5.7</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-8">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F1FAFF">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F1FAFF">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-9">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #720565">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #720565">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>10.5</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-10">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F8F2FC">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F8F2FC">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-11">
<div class="color-matrix__swatch color-matrix__swatch--partial" style="background-color: #1B776C">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--{% endif %}" style="background-color: #FFFBF0; color: #1B776C">AA</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>5.2</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-12">
<div class="color-matrix__swatch color-matrix__swatch--full-fail" style="background-color: #F0F9F6">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--fail" style="color: #F0F9F6">DNP</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>1</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-13">
<div class="color-matrix__swatch color-matrix__swatch--full-pass" style="background-color: #2B384D">
<div class="color-matrix__swatch-text">
<p style="color: #FFFBF0">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill color-matrix__pill--pass" style="color: #2B384D">Pass</p>
</div>
<div class="color-matrix__swatch-ratio">
<div class="color-matrix__ratio">
<p style="color: #FFFBF0"><span class="u-sr-only">Contrast ratio </span>11.4</p>
</div>
</div>
</div>
</div>
</td>
<td headers="color-on-14">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h1 class="frctl-h1" style="margin-bottom: 50px; padding: 20px 30px;">Colors</h1>
{% if colors %}
<div class="color-block-group">
<h2 class="frctl-h2">Brand Colors</h2>
<div class="color-blocks">
<div class="color-blocks__inner">
{% for sassName, hex in colors %}
<div class="color-block">
<div class="color-block__tile" style="background-color: {{ hex }}"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">{{ sassName }}</code></div>
<div class="color-block__name"><span class="fractal-label">Hex:</span> <code class="fractal-code">{{ hex }}</code></div>
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-{{ sassName|replace({'$': '' }) }}</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-{{ sassName|replace({'$': '' }) }}</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-{{ sassName|replace({'$': '' }) }}</code></div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if groups %}
{% for name, group in groups %}
<div class="color-block-group">
<h2 class="frctl-h2">{{ name }}</h2>
{% if group.description %}
<p style="padding: 0 3rem;">{{ group.description }}</p>
{% endif %}
<div class="color-blocks">
<div class="color-blocks__inner">
{% for sassName, hex in group.colors %}
{% set typeName = 'var(--' in hex ? 'CSS Variable' : 'Hex' %}
{% set typeName = 'rgba' in hex ? 'RGBA' : typeName %}
<div class="color-block">
<div class="color-block__tile" style="background-color: {{ hex }}"></div>
<div class="color-block__name"><span class="fractal-label">Sass:</span> <code class="fractal-code">{{ sassName }}</code></div>
<div class="color-block__name"><span class="fractal-label">{{ typeName }}:</span> <code class="fractal-code">{{ hex }}</code></div>
{% if group.useUtils %}
<div class="color-block__name"><span class="fractal-label">Color Class:</span> <code class="fractal-code">.u-c-{{ sassName|replace({'$': '' }) }}</code></div>
<div class="color-block__name"><span class="fractal-label">Background Class:</span> <code class="fractal-code">.u-bg-{{ sassName|replace({'$': '' }) }}</code></div>
<div class="color-block__name"><span class="fractal-label">Fill Class:</span> <code class="fractal-code">.u-fill-{{ sassName|replace({'$': '' }) }}</code></div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% if results %}
<div id="color-test-top" class="color-test">
<h2 class="frctl-h2">Color Accessibility Checks - Matrix</h2>
<div style="margin-top: 40px; margin-bottom: 40px;">
<h3 class="frctl-h3" id="color-matrix-details">About the Tests</h3>
<p>Color ratios are tested for AA and AAA.</p>
<ul aria-labelledby="color-matrix-details">
<li><p>Tests marked as "Pass" meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.</p></li>
<li><p>Tests marked as "DNP" <i>do not</i> meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.</p></li>
<li><p>Tests with "AA" only pass WCAG 2.1 AA standards.</p></li>
</ul>
</div>
<div class="color-matrix">
<table class="color-matrix__table">
<thead class="color-matrix__row color-matrix__row--header">
<tr>
<th id="color-name" class="color-matrix__self color-matrix__corner color-matrix__stick-left color-matrix__stick-top">
<h3>Text Color</h3>
</th>
{% for result in results %}
{% if loop.first %}
{# <th class="color-matrix__results"> #}
<th id="color-on-1" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>{{ results.1.combinations.0.name }}</h4>
<p>{{ results.1.combinations.0.hex }}</p>
</div>
</th>
{% for item in result.combinations %}
<th id="color-on-{{ loop.index + 1 }}" class="color-matrix__color-column-header color-matrix__stick-top">
<div class="color-matrix__swatch--title">
<h4>{{ item.name }}</h4>
<p>{{ item.hex }}</p>
</div>
</th>
{% endfor %}
{# </div> #}
{% endif %}
{% endfor %}
</tr>
</thead>
<tbody class="color-matrix__table-body">
{% for result in results %}
<tr id="result-{{ result.name|replace({'$': ''}) }}" class="color-matrix__row">
<th headers="color-name" class="color-matrix__self color-matrix__stick-left">
<h4>{{ result.name }}</h4>
<p>{{ result.hex }}</p>
</th>
{% set resultIndex = loop.index %}
{% set resultLast = loop.last %}
{% set headerIndex = 0 %}
{% for item in result.combinations %}
{% set headerIndex = headerIndex + 1 %}
{% if resultIndex == loop.index %}
<td headers="color-on-{{ headerIndex }}">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
{% set headerIndex = headerIndex + 1 %}
{% endif %}
{# {% set aa_status = item.accessibility.aa ? 'green' : 'red' %}
{% set aa_lg_status = item.accessibility.aaLarge ? 'green' : 'red' %}
{% set aaa_status = item.accessibility.aaa ? 'green' : 'red' %}
{% set aaa_lg_status = item.accessibility.aaaLarge ? 'green' : 'red' %}
{% set aa_fail = item.accessibility.aa and item.accessibility.aaLarge is same as(true) ? 'pass' : 'fail' %}
{% set aa_fail = item.accessibility.aa and item.accessibility.aaLarge and item.accessibility.aaa and item.accessibility.aaaLarge is same as(true) ? 'glorious' : aa_fail %} #}
{% set ratio = '<div class="color-matrix__ratio"><p style="color: ' ~ result.hex ~ '"><span class="u-sr-only">Contrast ratio </span>' ~ item.contrast|round(1, 'floor') ~'</p></div>' %}
<td headers="color-on-{{ headerIndex }}">
{% set wrapperModClass = '' %}
{% set pillModClass = '' %}
{% set pillText = '' %}
{% set pillText = '' %}
{% set pillStyle = '' %}
{% if item.accessibility.aa and item.accessibility.aaa %}
{% set wrapperModClass = 'color-matrix__swatch--full-pass' %}
{% set pillModClass = 'color-matrix__pill--pass' %}
{% set pillText = 'Pass' %}
{% elseif not item.accessibility.aa and not item.accessibility.aaa %}
{% set wrapperModClass = 'color-matrix__swatch--full-fail' %}
{% set pillModClass = 'color-matrix__pill--fail' %}
{% set pillText = 'DNP' %}
{% elseif item.accessibility.aa %}
{% set wrapperModClass = 'color-matrix__swatch--partial' %}
{% set pillModClass = 'color-matrix__pill--{% endif %}' %}
{% set pillText = 'AA' %}
{% set pillStyle = 'background-color: ' ~ result.hex ~ '; '%}
{% endif %}
{# Mixed Results #}
<div class="color-matrix__swatch {{ wrapperModClass }}" style="background-color: {{ item.hex }}">
<div class="color-matrix__swatch-text">
<p style="color: {{ result.hex }}">Sample Text</p>
</div>
<div class="color-matrix__swatch-info">
<div class="color-matrix__pill-wrapper">
<p class="color-matrix__pill {{ pillModClass }}" style="{{ pillStyle }}color: {{ item.hex }}">{{ pillText }}</p>
</div>
<div class="color-matrix__swatch-ratio">
{{ ratio }}
</div>
</div>
</div>
</td>
{% if resultLast and loop.last %}
{% set headerIndex = headerIndex + 1 %}
<td headers="color-on-{{ headerIndex }}">
<div class="color-matrix__swatch color-matrix__swatch--self">
<span class="u-sr-only">Test on self skipped</span>
</div>
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
{
"pageColorTheme": "teal",
"colors": {
"$c-white": "#ffffff",
"$c-black": "#111111",
"$c-charcoal": "#4D4D4F",
"$c-charcoal-light": "#F3F3F3",
"$c-reef": "#C34737",
"$c-reef-light": "#FDF4F0",
"$c-teal": "#006D85",
"$c-teal-light": "#F1FAFF",
"$c-plum": "#720565",
"$c-plum-light": "#F8F2FC",
"$c-ocean": "#1B776C",
"$c-ocean-light": "#F0F9F6",
"$c-navy": "#2B384D",
"$c-navy-light": "#FFFBF0"
},
"groups": {
"Color Theme Variables": {
"description": "Color theme colors are dependant on css variables which will change based on page and scroll patterns. More defined in the color themes documentation.",
"useUtils": true,
"colors": {
"$ct-bkg": "var(--ct-bkg)",
"$ct-txt": "var(--ct-txt)",
"$ct-dark": "var(--ct-dark)",
"$ct-light": "var(--ct-light)",
"$ct-text-on-light": "var(--ct-text-on-light)",
"$ct-text-on-dark": "var(--ct-text-on-dark)"
}
}
},
"raw": {
"$c-white": "#ffffff",
"$c-black": "#111111",
"$c-charcoal": "#4D4D4F",
"$c-charcoal-light": "#F3F3F3",
"$c-reef": "#C34737",
"$c-reef-light": "#FDF4F0",
"$c-teal": "#006D85",
"$c-teal-light": "#F1FAFF",
"$c-plum": "#720565",
"$c-plum-light": "#F8F2FC",
"$c-ocean": "#1B776C",
"$c-ocean-light": "#F0F9F6",
"$c-navy": "#2B384D",
"$c-navy-light": "#FFFBF0"
},
"results": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"combinations": [
{
"hex": "#111111",
"name": "$c-black",
"contrast": 18.883060964594996,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 8.43370238380922,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.109620634183961,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.910118165298049,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0838677847436091,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.9555094199783545,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.0574871530498218,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 10.908485633712042,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.0996031535143866,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 5.382028453938436,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.0721895036229498,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 11.827307820590871,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0340178983010182,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#111111",
"name": "$c-black",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 18.883060964594996,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 2.23900015737408,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 17.01758275113729,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 3.8457447110030554,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 17.421922886158868,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 3.1706877838610867,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 17.85653935382168,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 1.7310432995610308,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 17.17261441479482,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 3.5085397868487362,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 17.611682357259376,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 1.5965645987263761,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 18.261831826723228,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
}
]
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 8.43370238380922,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 2.23900015737408,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 7.6005277155030075,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 1.7176169900378122,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 7.781117312019959,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 1.4161177137118643,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 7.975229164237306,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 1.2934397180832278,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 7.669769186142004,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 1.5670118536139739,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 7.865869191324452,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 1.4023861979403731,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 8.156244101447886,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
}
]
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.109620634183961,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 17.01758275113729,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 7.6005277155030075,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.425042229778879,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0237601392004134,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.367158140816447,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.0492993990364656,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 9.83082442562397,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.0091100872506211,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 4.850331985666882,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.034910927997831,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 10.658875165284691,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0731155002318282,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#C34737",
"name": "$c-reef",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 4.910118165298049,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 3.8457447110030554,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 1.7176169900378122,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 4.425042229778879,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 4.530181849126134,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 1.2129055186631847,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 4.643194152417959,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 2.2216340353694704,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 4.465354750579848,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 1.0961097620777407,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 4.579524560450052,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 2.408762360176915,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 4.748581405956127,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
}
]
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.0838677847436091,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 17.421922886158868,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 7.781117312019959,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.0237601392004134,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.530181849126134,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.494682565352878,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.0249465268847047,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 10.06440618243162,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.0145177935835596,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 4.965576548814545,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.0108919935153236,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 10.912131522931686,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0482098873960484,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#006D85",
"name": "$c-teal",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 5.9555094199783545,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 3.1706877838610867,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 1.4161177137118643,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 5.367158140816447,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 1.2129055186631847,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 5.494682565352878,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 5.631755811692371,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 1.831662896396139,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 5.416053419767167,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 1.1065548000996277,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 5.554530612223463,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 1.985943936368395,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 5.7595805931055715,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
}
]
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.0574871530498218,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 17.85653935382168,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 7.975229164237306,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.0492993990364656,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.643194152417959,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0249465268847047,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.631755811692371,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 10.315478161840238,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.039826488996203,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 5.089450437687606,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.0139031008847021,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 11.184351305337934,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0226971455594391,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#720565",
"name": "$c-plum",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 10.908485633712042,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 1.7310432995610308,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 1.2934397180832278,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 9.83082442562397,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 2.2216340353694704,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 10.06440618243162,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 1.831662896396139,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 10.315478161840238,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 9.920384093886941,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 2.0268353701715345,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 10.174027629306247,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 1.084230040514447,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 10.549610071194742,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
}
]
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.0996031535143866,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 17.17261441479482,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 7.669769186142004,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.0091100872506211,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.465354750579848,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0145177935835596,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.416053419767167,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.039826488996203,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 9.920384093886941,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 4.894518933250786,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.0255679148124521,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 10.755978448033915,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0634275821735106,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 5.382028453938436,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 3.5085397868487362,
"accessibility": {
"aa": false,
"aaLarge": true,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 1.5670118536139739,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 4.850331985666882,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 1.0961097620777407,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 4.965576548814545,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 1.1065548000996277,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 5.089450437687606,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 2.0268353701715345,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 4.894518933250786,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 5.019661576384076,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 2.197555795517197,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 5.204966435089354,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
}
]
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.0721895036229498,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 17.611682357259376,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 7.865869191324452,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.034910927997831,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.579524560450052,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0108919935153236,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.554530612223463,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.0139031008847021,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 10.174027629306247,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.0255679148124521,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 5.019661576384076,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 11.030986388717816,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 1.0369158071486488,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
{
"hex": "#2B384D",
"name": "$c-navy",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 11.827307820590871,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 1.5965645987263761,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 1.4023861979403731,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 10.658875165284691,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 2.408762360176915,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 10.912131522931686,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 1.985943936368395,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 11.184351305337934,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 1.084230040514447,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 10.755978448033915,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 2.197555795517197,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 11.030986388717816,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"contrast": 11.438204154903094,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
}
]
},
{
"hex": "#FFFBF0",
"name": "$c-navy-light",
"combinations": [
{
"hex": "#FFFFFF",
"name": "$c-white",
"contrast": 1.0340178983010182,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#111111",
"name": "$c-black",
"contrast": 18.261831826723228,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#4D4D4F",
"name": "$c-charcoal",
"contrast": 8.156244101447886,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F3F3F3",
"name": "$c-charcoal-light",
"contrast": 1.0731155002318282,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#C34737",
"name": "$c-reef",
"contrast": 4.748581405956127,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#FDF4F0",
"name": "$c-reef-light",
"contrast": 1.0482098873960484,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#006D85",
"name": "$c-teal",
"contrast": 5.7595805931055715,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F1FAFF",
"name": "$c-teal-light",
"contrast": 1.0226971455594391,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#720565",
"name": "$c-plum",
"contrast": 10.549610071194742,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
},
{
"hex": "#F8F2FC",
"name": "$c-plum-light",
"contrast": 1.0634275821735106,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#1B776C",
"name": "$c-ocean",
"contrast": 5.204966435089354,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": false,
"aaaLarge": true
}
},
{
"hex": "#F0F9F6",
"name": "$c-ocean-light",
"contrast": 1.0369158071486488,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#2B384D",
"name": "$c-navy",
"contrast": 11.438204154903094,
"accessibility": {
"aa": true,
"aaLarge": true,
"aaa": true,
"aaaLarge": true
}
}
]
}
],
"type": "matrix"
}
Sass color variables can be found in `assets/src/scss/01-Sass-Utils/_vars.colors.scss
Each sass variable in the color-styles map variable produces color, background, and fill utility classes.
Color values are taken from both the color_list and the color_groups lists. All colors are checked for AA and AAA contrast compliance as the Hex value for text on every other color.