Aria-practices: The borders of the pills and the "Remove" button in Layout Grid Example 2 do not provide sufficient contrast

[chlane]

Go to https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/LayoutGrids.html and observe that the borders of the pills in the Layout Grid Example 2 use the colors #acc1e4 and #fff yielding a contrast ratio of 1.83:1. This issue also occurs with the pill's "Remove" button.

See the relevant HTML/CSS below.

<div role="row" class="pill-item" data-id="2">
              <span role="gridcell"><a id="r2" class="pill-name" tabindex="-1" href="#">Recipient Name 2</a></span>
              <span role="gridcell"><span id="rb2" class="pill-remove" tabindex="-1" role="button" aria-label="Remove" aria-labelledby="rb2 r2"> X </span></span>
            </div>

<span id="rb2" class="pill-remove" tabindex="-1" role="button" aria-label="Remove" aria-labelledby="rb2 r2"> X </span>

.pill-item {
    background: #eee;
    border: 1px solid #acc1e4;
    border-radius: 2px;
    color: #acc1e4;
    display: inline-block;
    font-size: 14px;
    margin: 5px 5px 0 0;
    padding: 0.3em;
}

I recommend increasing the border and "Remove" button's contrast to 3:1 to comply with https://www.w3.org/TR/WCAG21/#non-text-contrast.

[mcking65]

@chlane thank you for the detailed, clear bug report!

[hellofanny]

Hiiii! Can I work on this issue? 🙃

[carmacleod]

@hellofanny Absolutely! 🙂
I'll assign it to you so that others know you've got this one. :)

[mcking65]

Thank you @chlane, @hellofanny , and @carmacleod, this fix will be in the 1.2 release. It is in the editor's draft now.