<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": "&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": "#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.