<main role="main" id="main" tabindex="-1">
  <h1>Color Hacks – Alpha Scales</h1>
  <h2>Flat color – Fails 4.5:1 under #C9C9C9</h2>
  <ul class="palette">
    <li>#555</li>
    <li>Fails</li>
  </ul>
  <h2>Alpha color - Pass until #919191</h2>
  <ul class="palette alpha">
    <li>Looks like #555</li>
    <li>Still works</li>
  </ul>
</main>

*,::before,::after{background-repeat:no-repeat;box-sizing:border-box;color:inherit;cursor:inherit;font:inherit;hyphens:auto;line-height:inherit;margin:0;text-decoration:inherit;vertical-align:inherit;word-break:break-word;scroll-behavior:smooth}
::before,::after{text-decoration:inherit}
:root,html{-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;cursor:default;}

/* Begin custom code */
:root{
  background:#3D3D3E;
  color:#eee;
  font-family:sans-serif;
  font-size:16px;
  padding:2em;
}
h1{display:none}
h2{font-weight:900;font-size:120%}

.palette{
  list-style:none;
  padding:.5rem 0 0;
  &+h2{margin-top:2rem}
  li{
    --dim:56px;
    background:#fff;
    color:#555;
    font-size:calc(var(--dim)/3.5);
    padding-left:1em;
    font-weight:600;
    line-height:var(--dim);
    border-radius:calc(var(--dim)/10);
    width:20ch;
    height:var(--dim);
    display:inline-block;
    box-shadow:1px 4px 12px rgba(0,0,0,.2);
    margin:0 .25rem 0 0;
    &:nth-child(2){
      background:#C8C8C8;
    }
  }
}
.alpha>li{
  color:rgba(0,0,0,.7);
      &:nth-child(2){
      background:#939393;
    }
}