<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-black-red">
<h4>Buildit Black Red color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-black-red</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.381</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">4.512</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-dark-red">
<h4>Buildit Dark Red color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-dark-red</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.506</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">6.234</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.216</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">6.234</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">6.234</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">6.234</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">6.234</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.963</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.152</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.677</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-dark">
<h4>Buildit Dark color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-dark</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">17.777</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">15.36</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.506</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.621</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.185</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.316</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.185</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.185</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.185</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.185</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.849</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">7.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.386</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.518</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.033</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">5.825</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.033</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.033</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.033</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.033</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.377</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">8.102</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">10.794</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">9.326</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.677</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__ratio">5.769</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-white">
<h4>Buildit White color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-white</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">19.524</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">17.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">18.286</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">16.869</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">15.202</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">15.8</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">18.144</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">19.524</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">17.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">18.286</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">19.524</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">17.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">18.286</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.227</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">7.649</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.227</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">6.893</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.164</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.227</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.742</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.274</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.442</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">11.45</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">10.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">11.45</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">9.594</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">9.971</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">11.45</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.888</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.545</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.888</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.096</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.257</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.888</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">4.742</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.274</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.442</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.101</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">19.524</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">17.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">18.286</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">19.524</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">17.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">18.286</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">21</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.48</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #f2f7ff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.095</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.48</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ccf4e1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.592</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffedd1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.772</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.48</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-teal-black">
<h4>Teal Black color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-teal-black</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">9.424</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">5.312</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">16.826</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">12.126</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">16.826</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">16.826</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">16.826</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">16.826</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">9.424</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">13.077</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.597</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">6.196</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.597</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.597</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.597</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.597</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">5.776</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.484</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">6.835</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.484</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.484</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.484</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">9.484</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">5.312</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">7.371</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">5.776</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">8.015</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.952</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">9.334</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.952</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.952</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.952</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">12.952</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">14.762</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">10.638</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">14.762</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">14.762</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">14.762</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">14.762</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.325</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #262626; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #262626;">Xyz</span>
<span class="sg-color-contrast__ratio">4.558</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.325</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.325</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.325</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
<span class="sg-color-contrast__ratio">6.325</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-teal-dark-gray">
<h4>Teal Dark Gray color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-teal-dark-gray</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.308</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.308</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.456</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.456</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.598</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.598</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.598</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.598</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.308</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.308</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">7.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.578</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.578</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.703</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.703</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.703</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.703</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.874</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">6.874</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.96</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.96</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.96</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">5.96</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">4.945</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">4.945</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.287</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.287</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.287</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.287</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.645</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.895</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">7.115</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">7.115</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.169</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.169</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.169</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.169</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.069</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">8.069</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__ratio">5.595</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.851</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.851</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.851</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__ratio">4.851</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
<section class="sg-color-scheme-demo grav-u-color-scheme-teal-white">
<h4>Teal White color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-teal-white</code> utility class.</p>
<table class="grav-u-font-size-minus-2">
<tr>
<td></td>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral);"></span>
<code>--grav-co-grp-a-neutral</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
<code>--grav-co-grp-a-neutral-alt</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent);"></span>
<code>--grav-co-grp-a-accent</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
<code>--grav-co-grp-a-accent-success</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
<code>--grav-co-grp-a-accent-attention</code>
</span>
</th>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
<code>--grav-co-grp-a-accent-danger</code>
</span>
</th>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral);"></span>
<code>--grav-co-grp-b-neutral</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">9.18</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">9.04</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">8.069</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">7.59</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
<code>--grav-co-grp-b-neutral-subtle</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.959</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.838</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.581</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
<code>--grav-co-grp-b-neutral-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">9.18</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">10.368</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">9.04</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">8.069</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #404040;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #404040; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">7.59</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control);"></span>
<code>--grav-co-grp-b-control</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.959</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.838</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.581</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
<code>--grav-co-grp-b-control-alt</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.589</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.604</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.589</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.489</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.684</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #6f2c91;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.287</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
<code>--grav-co-grp-b-control-emphasis</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.122</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.535</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.122</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">4.466</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">3.987</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">3.75</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-active);"></span>
<code>--grav-co-grp-b-control-active</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">7.934</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.025</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">7.934</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">6.918</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.175</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #005c50;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #005c50; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">5.808</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
<code>--grav-co-grp-b-control-disabled</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.742</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">5.084</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.742</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">5.006</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">4.469</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #666666;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #666666; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">4.203</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent);"></span>
<code>--grav-co-grp-b-accent</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.122</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">4.535</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">5.122</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">4.466</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">3.987</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #007c6c;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">3.75</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
<code>--grav-co-grp-b-accent-success</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.959</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.838</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.581</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
<code>--grav-co-grp-b-accent-attention</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.959</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.838</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.581</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="sg-color-prop">
<span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
<code>--grav-co-grp-b-accent-danger</code>
</span>
</th>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
<span class="sg-color-contrast__ratio">7.959</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
<span class="sg-color-contrast__ratio">8.989</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
<span class="sg-color-contrast__ratio">7.838</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
<span class="sg-color-contrast__ratio">6.996</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
<td>
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
<span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
<span class="sg-color-contrast__ratio">6.581</span>
<span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
</span>
</td>
</tr>
</table>
</section>
{%- macro colorProp(varName) %}
<span class="sg-color-prop">
<span style="background-color: var({{ varName }});"></span>
<code>{{ varName }}</code>
</span>
{% endmacro -%}
{%- macro colorContrast(contrastRatio, wcagRating, colorA, colorB) %}
<span class="sg-color-contrast">
<span class="sg-color-contrast__sample" style="color: {{ colorA }}; background-color: {{ colorB }};">Xyz</span>
<span class="sg-color-contrast__sample" style="color: {{ colorB }}; background-color: {{ colorA }};">Xyz</span>
<span class="sg-color-contrast__ratio">{{ contrastRatio | round(3) }}</span>
<span class="sg-color-contrast__score sg-color-contrast__score--{{ wcagRating | lower }}">{{ wcagRating }}</span>
</span>
{% endmacro -%}
{%- macro colorSchemeTable(tableData) %}
<table class="grav-u-font-size-minus-2">
{% for row in tableData %}
<tr>
{% if loop.first %}
{# header row #}
{% for cell in row %}
{% if loop.first %}
{# top-left cell is blank #}
<td></td>
{% else %}
<th>
{{ colorProp(cell) | safe }}
</th>
{% endif %}
{% endfor %}
{% else %}
{# normal row #}
{% for cell in row %}
{% if loop.first %}
{# first cell is row header #}
<th>
{{ colorProp(cell) | safe }}
</th>
{% else %}
<td>
{{ colorContrast(cell.contrastRatio, cell.wcagRating, cell.colorA, cell.colorB) | safe }}
</td>
{% endif %}
{% endfor %}
{% endif %}
</tr>
{% endfor %}
</table>
{% endmacro -%}
{% for schemeData in colorSchemes %}
<section class="sg-color-scheme-demo grav-u-color-scheme-{{ schemeData.kebabName }}">
<h4>{{ schemeData.humanName | title }} color scheme</h4>
<p>Can be applied to containers using the <code>grav-u-color-scheme-{{ schemeData.kebabName }}</code> utility class.</p>
{{ colorSchemeTable( schemeData.table ) | safe }}
</section>
{% endfor %}
{
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
"url": "#",
"listItems": [
{
"htmlContent": "Some list item content"
},
{
"htmlContent": "More list item content"
},
{
"htmlContent": "Even more list item content"
},
{
"htmlContent": "I can't believe there's still more list item content"
},
{
"htmlContent": "Seriously?! That's enough now."
}
],
"footer": {
"copy": "© 2019 <strong>Buildit</strong>. All rights reserved.",
"linksA": [
{
"label": "Stories",
"url": "#"
},
{
"label": "People",
"url": "#"
},
{
"label": "Jobs",
"url": "#"
}
],
"linksB": [
{
"label": "Terms",
"url": "#"
},
{
"label": "Accessibility",
"url": "#"
},
{
"label": "Privacy & Cookie Policy",
"url": "https://wiprodigital.com/privacy-policy"
}
]
},
"hero": {
"pullout": "Big, attention-grabbing headline",
"paragraph": "Witty subtitle",
"cta": {
"text": "Clickbaity label",
"url": "#"
}
},
"img": {
"random": {
"src": "/images/img-random-1.png",
"alt": "A placeholder image with an arbitrary aspect ratio."
},
"square": {
"src": "/images/img-1x1.png",
"alt": "A placeholder image with a perfect square (1:1) aspect ratio."
},
"tv": {
"src": "/images/img-4x3.png",
"alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
},
"widescreen": {
"src": "/images/img-16x9.png",
"alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
},
"logo": {
"src": "/images/img-random-2.png",
"alt": "A test image for a logo with an arbitrary aspect ratio."
}
},
"title": "Page title",
"header": {
"url": "./homepage",
"links": [
{
"text": "Jobs",
"url": "./jobs"
},
{
"text": "Locations",
"url": "./locations"
}
],
"externalLinks": [
{
"text": "Fancy external website",
"url": "./error-page"
}
]
},
"sections": [
{
"title": "Example section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
}
]
}
],
"section": {
"title": "This is the title for a section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
{
"twoColumnsList": [
{
"htmlContent": "Vestibulum auctor dapibus neque."
},
{
"htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
},
{
"htmlContent": "Aliquam tincidunt mauris eu risus."
},
{
"htmlContent": "Labore et dolore magna aliqua."
},
{
"htmlContent": "Phasellus tempus, orci non mattis sagittis."
}
]
},
{
"inlineRow": [
{
"text": "First link",
"url": "#"
},
{
"text": "Second link",
"url": "#"
},
{
"text": "Third link",
"url": "#"
}
]
},
{
"imgCards": [
{
"title": "Some fascinating, attention-grabbing headling",
"content": "Ideally, with a click-baity tagline that entices to you to visit!",
"image": {
"src": "/images/img-random-1.png",
"alt": "Brief description of this fascinating image"
}
},
{
"title": "Labore et dolore magna aliqua",
"content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Phasellus tempus, orci non mattis"
}
},
{
"title": "Nanotechnology immersion along the information highway",
"content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Bring to the table win-win survival strategies"
}
}
]
},
{
"imgLinks": [
{
"url": "#",
"image": {
"src": "/images/img-random-1.png",
"alt": "Image linke #1"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-2.png",
"alt": "Image linke #2"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-3.png",
"alt": "Image linke #3"
}
}
]
}
]
},
"colorSchemes": [
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#c3c7ce",
"contrastRatio": 12.381036246545554,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b433e2",
"contrastRatio": 4.512387636344142,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff2552",
"contrastRatio": 5.638466398186093,
"wcagRating": "AA"
}
]
],
"humanName": "Buildit Black Red",
"kebabName": "buildit-black-red"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#c766e9",
"contrastRatio": 6.505609696670502,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#061434",
"colorB": "#ff663b",
"contrastRatio": 6.234446115494696,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff663b",
"contrastRatio": 7.215701853752881,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ff663b",
"contrastRatio": 6.234446115494696,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff663b",
"contrastRatio": 6.234446115494696,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff663b",
"contrastRatio": 6.234446115494696,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff663b",
"contrastRatio": 6.234446115494696,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff3f00",
"contrastRatio": 5.963002719836956,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff3f00",
"contrastRatio": 5.15210022487786,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff5173",
"contrastRatio": 6.676532792243066,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
}
]
],
"humanName": "Buildit Dark Red",
"kebabName": "buildit-dark-red"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ebecef",
"contrastRatio": 17.7770135962131,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ebecef",
"contrastRatio": 15.359536134709423,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffffff",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffffff",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#c766e9",
"contrastRatio": 6.505609696670502,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#c766e9",
"contrastRatio": 5.62091864719125,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#061434",
"colorB": "#74a2fc",
"contrastRatio": 7.185451051610193,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#74a2fc",
"contrastRatio": 8.316387937702174,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#74a2fc",
"contrastRatio": 7.185451051610193,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#74a2fc",
"contrastRatio": 7.185451051610193,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#74a2fc",
"contrastRatio": 7.185451051610193,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#74a2fc",
"contrastRatio": 7.185451051610193,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#061434",
"colorB": "#98a5e5",
"contrastRatio": 7.645255309708688,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#98a5e5",
"contrastRatio": 8.8485619874993,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#98a5e5",
"contrastRatio": 7.645255309708688,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#98a5e5",
"contrastRatio": 7.645255309708688,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#98a5e5",
"contrastRatio": 7.645255309708688,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#98a5e5",
"contrastRatio": 7.645255309708688,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#878e9d",
"contrastRatio": 6.386243995504222,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#878e9d",
"contrastRatio": 5.517785362717699,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#061434",
"colorB": "#4382fb",
"contrastRatio": 5.032620684676191,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#4382fb",
"contrastRatio": 5.824717983110135,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#4382fb",
"contrastRatio": 5.032620684676191,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#4382fb",
"contrastRatio": 5.032620684676191,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#4382fb",
"contrastRatio": 5.032620684676191,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#4382fb",
"contrastRatio": 5.032620684676191,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00c76a",
"contrastRatio": 9.377491072584577,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#00c76a",
"contrastRatio": 8.102255882448123,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffa719",
"contrastRatio": 10.793524058700372,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
},
{
"colorA": "#061434",
"colorB": "#ffa719",
"contrastRatio": 9.325724025759841,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#ff5173",
"contrastRatio": 6.676532792243066,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
},
{
"colorA": "#061434",
"colorB": "#ff5173",
"contrastRatio": 5.76859809000061,
"wcagRating": "AA"
}
]
],
"humanName": "Buildit Dark",
"kebabName": "buildit-dark"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#000000",
"contrastRatio": 19.52375481543618,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#000000",
"contrastRatio": 17.594995844328555,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#000000",
"contrastRatio": 18.286364589564393,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#ffffff",
"colorB": "#061434",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#061434",
"contrastRatio": 16.86873984485107,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#061434",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#061434",
"contrastRatio": 15.202270786280776,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#061434",
"contrastRatio": 15.799621019906105,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#061434",
"contrastRatio": 18.144231992802677,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#000000",
"contrastRatio": 19.52375481543618,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#000000",
"contrastRatio": 17.594995844328555,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#000000",
"contrastRatio": 18.286364589564393,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#000000",
"contrastRatio": 19.52375481543618,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#000000",
"contrastRatio": 17.594995844328555,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#000000",
"contrastRatio": 18.286364589564393,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#ffffff",
"colorB": "#8100af",
"contrastRatio": 8.227374935790579,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#8100af",
"contrastRatio": 7.64901195338287,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#8100af",
"contrastRatio": 8.227374935790579,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#8100af",
"contrastRatio": 6.893363228808007,
"wcagRating": "AA"
},
{
"colorA": "#ffedd1",
"colorB": "#8100af",
"contrastRatio": 7.164227509090974,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#8100af",
"contrastRatio": 8.227374935790579,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
},
{
"colorA": "#f2f7ff",
"colorB": "#0060ff",
"contrastRatio": 4.742057552626242,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
},
{
"colorA": "#ccf4e1",
"colorB": "#0060ff",
"contrastRatio": 4.273587930230392,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffedd1",
"colorB": "#0060ff",
"contrastRatio": 4.441512103166799,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#ffffff",
"colorB": "#0000c8",
"contrastRatio": 11.450218379668653,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#0000c8",
"contrastRatio": 10.645297915611987,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#0000c8",
"contrastRatio": 11.450218379668653,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#0000c8",
"contrastRatio": 9.593644990805924,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#0000c8",
"contrastRatio": 9.970612758131058,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#0000c8",
"contrastRatio": 11.450218379668653,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#ffffff",
"colorB": "#697184",
"contrastRatio": 4.8883921252416,
"wcagRating": "AA"
},
{
"colorA": "#f2f7ff",
"colorB": "#697184",
"contrastRatio": 4.544750918806,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#697184",
"contrastRatio": 4.8883921252416,
"wcagRating": "AA"
},
{
"colorA": "#ccf4e1",
"colorB": "#697184",
"contrastRatio": 4.095773291860685,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffedd1",
"colorB": "#697184",
"contrastRatio": 4.256710507567782,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffffff",
"colorB": "#697184",
"contrastRatio": 4.8883921252416,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
},
{
"colorA": "#f2f7ff",
"colorB": "#0060ff",
"contrastRatio": 4.742057552626242,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
},
{
"colorA": "#ccf4e1",
"colorB": "#0060ff",
"contrastRatio": 4.273587930230392,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffedd1",
"colorB": "#0060ff",
"contrastRatio": 4.441512103166799,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffffff",
"colorB": "#0060ff",
"contrastRatio": 5.100617660206274,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#000000",
"contrastRatio": 19.52375481543618,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#000000",
"contrastRatio": 17.594995844328555,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#000000",
"contrastRatio": 18.286364589564393,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#f2f7ff",
"colorB": "#000000",
"contrastRatio": 19.52375481543618,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
},
{
"colorA": "#ccf4e1",
"colorB": "#000000",
"contrastRatio": 17.594995844328555,
"wcagRating": "AAA"
},
{
"colorA": "#ffedd1",
"colorB": "#000000",
"contrastRatio": 18.286364589564393,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#000000",
"contrastRatio": 21,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#ffffff",
"colorB": "#cc1e42",
"contrastRatio": 5.480377736541845,
"wcagRating": "AA"
},
{
"colorA": "#f2f7ff",
"colorB": "#cc1e42",
"contrastRatio": 5.095121486867527,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#cc1e42",
"contrastRatio": 5.480377736541845,
"wcagRating": "AA"
},
{
"colorA": "#ccf4e1",
"colorB": "#cc1e42",
"contrastRatio": 4.591772547609738,
"wcagRating": "AA"
},
{
"colorA": "#ffedd1",
"colorB": "#cc1e42",
"contrastRatio": 4.77219930375885,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#cc1e42",
"contrastRatio": 5.480377736541845,
"wcagRating": "AA"
}
]
],
"humanName": "Buildit White",
"kebabName": "buildit-white"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#cccccc",
"contrastRatio": 9.423538343717585,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#999999",
"contrastRatio": 5.311822386007325,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#000000",
"colorB": "#e6e6e6",
"contrastRatio": 16.825958806652604,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#e6e6e6",
"contrastRatio": 12.125530592059377,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#e6e6e6",
"contrastRatio": 16.825958806652604,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#e6e6e6",
"contrastRatio": 16.825958806652604,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#e6e6e6",
"contrastRatio": 16.825958806652604,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#e6e6e6",
"contrastRatio": 16.825958806652604,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#cccccc",
"contrastRatio": 9.423538343717585,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#cccccc",
"contrastRatio": 13.076546777106755,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#000000",
"colorB": "#b69cca",
"contrastRatio": 8.59725708325217,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#b69cca",
"contrastRatio": 6.195563947865884,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#b69cca",
"contrastRatio": 8.59725708325217,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b69cca",
"contrastRatio": 8.59725708325217,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b69cca",
"contrastRatio": 8.59725708325217,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b69cca",
"contrastRatio": 8.59725708325217,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#00b49d",
"contrastRatio": 5.776228586886282,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#000000",
"colorB": "#50c0ad",
"contrastRatio": 9.484375476377778,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#50c0ad",
"contrastRatio": 6.834860723653195,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#50c0ad",
"contrastRatio": 9.484375476377778,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#50c0ad",
"contrastRatio": 9.484375476377778,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#50c0ad",
"contrastRatio": 9.484375476377778,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#50c0ad",
"contrastRatio": 9.484375476377778,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#999999",
"contrastRatio": 5.311822386007325,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#999999",
"contrastRatio": 7.3709355625018365,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#00b49d",
"contrastRatio": 5.776228586886282,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#00b49d",
"contrastRatio": 8.015367535702296,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#000000",
"colorB": "#b6d772",
"contrastRatio": 12.952173200574588,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#b6d772",
"contrastRatio": 9.33390923999671,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b6d772",
"contrastRatio": 12.952173200574588,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b6d772",
"contrastRatio": 12.952173200574588,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b6d772",
"contrastRatio": 12.952173200574588,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#b6d772",
"contrastRatio": 12.952173200574588,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#000000",
"colorB": "#ffd27c",
"contrastRatio": 14.761684601386317,
"wcagRating": "AAA"
},
{
"colorA": "#262626",
"colorB": "#ffd27c",
"contrastRatio": 10.637923239992226,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffd27c",
"contrastRatio": 14.761684601386317,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffd27c",
"contrastRatio": 14.761684601386317,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffd27c",
"contrastRatio": 14.761684601386317,
"wcagRating": "AAA"
},
{
"colorA": "#000000",
"colorB": "#ffd27c",
"contrastRatio": 14.761684601386317,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#000000",
"colorB": "#f15b46",
"contrastRatio": 6.3250279223166705,
"wcagRating": "AA"
},
{
"colorA": "#262626",
"colorB": "#f15b46",
"contrastRatio": 4.558095051163286,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#f15b46",
"contrastRatio": 6.3250279223166705,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#f15b46",
"contrastRatio": 6.3250279223166705,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#f15b46",
"contrastRatio": 6.3250279223166705,
"wcagRating": "AA"
},
{
"colorA": "#000000",
"colorB": "#f15b46",
"contrastRatio": 6.3250279223166705,
"wcagRating": "AA"
}
]
],
"humanName": "Teal Black",
"kebabName": "teal-black"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#404040",
"colorB": "#e6e6e6",
"contrastRatio": 8.307518908862521,
"wcagRating": "AAA"
},
{
"colorA": "#404040",
"colorB": "#e6e6e6",
"contrastRatio": 8.307518908862521,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#404040",
"colorB": "#cccccc",
"contrastRatio": 6.456313180232458,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#cccccc",
"contrastRatio": 6.456313180232458,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#cccccc",
"contrastRatio": 5.5976500492779335,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#cccccc",
"contrastRatio": 5.5976500492779335,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#cccccc",
"contrastRatio": 5.5976500492779335,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#cccccc",
"contrastRatio": 5.5976500492779335,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#404040",
"colorB": "#ffffff",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#404040",
"colorB": "#ffffff",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#ffffff",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#ffffff",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#ffffff",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#ffffff",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#404040",
"colorB": "#e6e6e6",
"contrastRatio": 8.307518908862521,
"wcagRating": "AAA"
},
{
"colorA": "#404040",
"colorB": "#e6e6e6",
"contrastRatio": 8.307518908862521,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#e6e6e6",
"contrastRatio": 7.202653020604763,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#404040",
"colorB": "#d6c9e3",
"contrastRatio": 6.57804261197648,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#d6c9e3",
"contrastRatio": 6.57804261197648,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#d6c9e3",
"contrastRatio": 5.703189966654737,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#d6c9e3",
"contrastRatio": 5.703189966654737,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#d6c9e3",
"contrastRatio": 5.703189966654737,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#d6c9e3",
"contrastRatio": 5.703189966654737,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#404040",
"colorB": "#82cdbf",
"contrastRatio": 5.645340515608282,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#82cdbf",
"contrastRatio": 5.645340515608282,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#404040",
"colorB": "#acdcd2",
"contrastRatio": 6.873760316324645,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#acdcd2",
"contrastRatio": 6.873760316324645,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#acdcd2",
"contrastRatio": 5.9595784311091915,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#acdcd2",
"contrastRatio": 5.9595784311091915,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#acdcd2",
"contrastRatio": 5.9595784311091915,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#acdcd2",
"contrastRatio": 5.9595784311091915,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#404040",
"colorB": "#b3b3b3",
"contrastRatio": 4.945082069942044,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#b3b3b3",
"contrastRatio": 4.945082069942044,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#b3b3b3",
"contrastRatio": 4.287406468640028,
"wcagRating": "AA-lrg"
},
{
"colorA": "#4d4848",
"colorB": "#b3b3b3",
"contrastRatio": 4.287406468640028,
"wcagRating": "AA-lrg"
},
{
"colorA": "#4d4848",
"colorB": "#b3b3b3",
"contrastRatio": 4.287406468640028,
"wcagRating": "AA-lrg"
},
{
"colorA": "#4d4848",
"colorB": "#b3b3b3",
"contrastRatio": 4.287406468640028,
"wcagRating": "AA-lrg"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#404040",
"colorB": "#82cdbf",
"contrastRatio": 5.645340515608282,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#82cdbf",
"contrastRatio": 5.645340515608282,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#82cdbf",
"contrastRatio": 4.894533417638152,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#404040",
"colorB": "#c7df94",
"contrastRatio": 7.115233534564021,
"wcagRating": "AAA"
},
{
"colorA": "#404040",
"colorB": "#c7df94",
"contrastRatio": 7.115233534564021,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#c7df94",
"contrastRatio": 6.168936703275333,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#c7df94",
"contrastRatio": 6.168936703275333,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#c7df94",
"contrastRatio": 6.168936703275333,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#c7df94",
"contrastRatio": 6.168936703275333,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#404040",
"colorB": "#ffdfa4",
"contrastRatio": 8.069134544654968,
"wcagRating": "AAA"
},
{
"colorA": "#404040",
"colorB": "#ffdfa4",
"contrastRatio": 8.069134544654968,
"wcagRating": "AAA"
},
{
"colorA": "#4d4848",
"colorB": "#ffdfa4",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#ffdfa4",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#ffdfa4",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#ffdfa4",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#404040",
"colorB": "#f9ac90",
"contrastRatio": 5.594816263393932,
"wcagRating": "AA"
},
{
"colorA": "#404040",
"colorB": "#f9ac90",
"contrastRatio": 5.594816263393932,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#f9ac90",
"contrastRatio": 4.850728683418736,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#f9ac90",
"contrastRatio": 4.850728683418736,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#f9ac90",
"contrastRatio": 4.850728683418736,
"wcagRating": "AA"
},
{
"colorA": "#4d4848",
"colorB": "#f9ac90",
"contrastRatio": 4.850728683418736,
"wcagRating": "AA"
}
]
],
"humanName": "Teal Dark Gray",
"kebabName": "teal-dark-gray"
},
{
"table": [
[
null,
"--grav-co-grp-a-neutral",
"--grav-co-grp-a-neutral-alt",
"--grav-co-grp-a-accent",
"--grav-co-grp-a-accent-success",
"--grav-co-grp-a-accent-attention",
"--grav-co-grp-a-accent-danger"
],
[
"--grav-co-grp-b-neutral",
{
"colorA": "#ffffff",
"colorB": "#404040",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#404040",
"contrastRatio": 9.179691605086205,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#404040",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#404040",
"contrastRatio": 9.040383815367713,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#404040",
"contrastRatio": 8.069134544654968,
"wcagRating": "AAA"
},
{
"colorA": "#fdd4c2",
"colorB": "#404040",
"contrastRatio": 7.590112238842299,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-neutral-subtle",
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#4d4848",
"contrastRatio": 7.958830331046137,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#4d4848",
"contrastRatio": 7.838049905094984,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#4d4848",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#4d4848",
"contrastRatio": 6.580658490648205,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-neutral-emphasis",
{
"colorA": "#ffffff",
"colorB": "#404040",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#404040",
"contrastRatio": 9.179691605086205,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#404040",
"contrastRatio": 10.368377760269818,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#404040",
"contrastRatio": 9.040383815367713,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#404040",
"contrastRatio": 8.069134544654968,
"wcagRating": "AAA"
},
{
"colorA": "#fdd4c2",
"colorB": "#404040",
"contrastRatio": 7.590112238842299,
"wcagRating": "AAA"
}
],
[
"--grav-co-grp-b-control",
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#4d4848",
"contrastRatio": 7.958830331046137,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#4d4848",
"contrastRatio": 7.838049905094984,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#4d4848",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#4d4848",
"contrastRatio": 6.580658490648205,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-alt",
{
"colorA": "#ffffff",
"colorB": "#6f2c91",
"contrastRatio": 8.58881270706329,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#6f2c91",
"contrastRatio": 7.60414538586747,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#6f2c91",
"contrastRatio": 8.58881270706329,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#6f2c91",
"contrastRatio": 7.488747534613258,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#6f2c91",
"contrastRatio": 6.684197558628732,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#6f2c91",
"contrastRatio": 6.287391716648728,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-emphasis",
{
"colorA": "#ffffff",
"colorB": "#007c6c",
"contrastRatio": 5.122447733671394,
"wcagRating": "AA"
},
{
"colorA": "#f1f1f1",
"colorB": "#007c6c",
"contrastRatio": 4.535182990579279,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#007c6c",
"contrastRatio": 5.122447733671394,
"wcagRating": "AA"
},
{
"colorA": "#eaf3d8",
"colorB": "#007c6c",
"contrastRatio": 4.466358639439155,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffdfa4",
"colorB": "#007c6c",
"contrastRatio": 3.9865175552671763,
"wcagRating": "AA-lrg"
},
{
"colorA": "#fdd4c2",
"colorB": "#007c6c",
"contrastRatio": 3.74985886269999,
"wcagRating": "AA-lrg"
}
],
[
"--grav-co-grp-b-control-active",
{
"colorA": "#ffffff",
"colorB": "#005c50",
"contrastRatio": 7.934421221104232,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#005c50",
"contrastRatio": 7.024776831886279,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#005c50",
"contrastRatio": 7.934421221104232,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#005c50",
"contrastRatio": 6.918171275205754,
"wcagRating": "AA"
},
{
"colorA": "#ffdfa4",
"colorB": "#005c50",
"contrastRatio": 6.174920884189458,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#005c50",
"contrastRatio": 5.808348134189326,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-control-disabled",
{
"colorA": "#ffffff",
"colorB": "#666666",
"contrastRatio": 5.74183648145415,
"wcagRating": "AA"
},
{
"colorA": "#f1f1f1",
"colorB": "#666666",
"contrastRatio": 5.083561707073716,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#666666",
"contrastRatio": 5.74183648145415,
"wcagRating": "AA"
},
{
"colorA": "#eaf3d8",
"colorB": "#666666",
"contrastRatio": 5.006415352296652,
"wcagRating": "AA"
},
{
"colorA": "#ffdfa4",
"colorB": "#666666",
"contrastRatio": 4.468553535905903,
"wcagRating": "AA-lrg"
},
{
"colorA": "#fdd4c2",
"colorB": "#666666",
"contrastRatio": 4.203278888845407,
"wcagRating": "AA-lrg"
}
],
[
"--grav-co-grp-b-accent",
{
"colorA": "#ffffff",
"colorB": "#007c6c",
"contrastRatio": 5.122447733671394,
"wcagRating": "AA"
},
{
"colorA": "#f1f1f1",
"colorB": "#007c6c",
"contrastRatio": 4.535182990579279,
"wcagRating": "AA"
},
{
"colorA": "#ffffff",
"colorB": "#007c6c",
"contrastRatio": 5.122447733671394,
"wcagRating": "AA"
},
{
"colorA": "#eaf3d8",
"colorB": "#007c6c",
"contrastRatio": 4.466358639439155,
"wcagRating": "AA-lrg"
},
{
"colorA": "#ffdfa4",
"colorB": "#007c6c",
"contrastRatio": 3.9865175552671763,
"wcagRating": "AA-lrg"
},
{
"colorA": "#fdd4c2",
"colorB": "#007c6c",
"contrastRatio": 3.74985886269999,
"wcagRating": "AA-lrg"
}
],
[
"--grav-co-grp-b-accent-success",
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#4d4848",
"contrastRatio": 7.958830331046137,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#4d4848",
"contrastRatio": 7.838049905094984,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#4d4848",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#4d4848",
"contrastRatio": 6.580658490648205,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-attention",
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#4d4848",
"contrastRatio": 7.958830331046137,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#4d4848",
"contrastRatio": 7.838049905094984,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#4d4848",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#4d4848",
"contrastRatio": 6.580658490648205,
"wcagRating": "AA"
}
],
[
"--grav-co-grp-b-accent-danger",
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#f1f1f1",
"colorB": "#4d4848",
"contrastRatio": 7.958830331046137,
"wcagRating": "AAA"
},
{
"colorA": "#ffffff",
"colorB": "#4d4848",
"contrastRatio": 8.989426110617655,
"wcagRating": "AAA"
},
{
"colorA": "#eaf3d8",
"colorB": "#4d4848",
"contrastRatio": 7.838049905094984,
"wcagRating": "AAA"
},
{
"colorA": "#ffdfa4",
"colorB": "#4d4848",
"contrastRatio": 6.9959727975729775,
"wcagRating": "AA"
},
{
"colorA": "#fdd4c2",
"colorB": "#4d4848",
"contrastRatio": 6.580658490648205,
"wcagRating": "AA"
}
]
],
"humanName": "Teal White",
"kebabName": "teal-white"
}
]
}
There are no notes for this item.