<main role="main" id="main" tabindex="-1">
  <h1>Color Hacks – Hue Contrast Issues</h1>
  <h2>Against White</h2>
  <ul class="palette">
    <li>4:1 – Fail</li>
    <li>2.5:1 – Fail</li>
    <li>1:1 – Fail</li>
    <li>1.3:1 – Fail</li>
    <li>8.6:1 – Pass</li>
    <li>6.2:1 – Pass</li>
  </ul>
  <h2>Against Black</h2>
  <ul class="palette dark">
    <li>5.2:1 – Pass</li>
    <li>8.3:1 – Pass</li>
    <li>19.5:1 – Pass</li>
    <li>15.3:1 – Pass</li>
    <li>2.4:1 – Fail</li>
    <li>3.4:1 – Fail</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:.75rem 0 0;
  &+h2{margin-top:2rem}
  li{
    --dim:64px;
    color:#fff;
    background:red;
    border-radius:8px;
    width:calc(2*var(--dim));
    line-height:var(--dim);
    font-size:calc(var(--dim)/4);
    font-weight:700;
    display:inline-block;
    margin-right:.2rem;
    text-align:center;
    padding:0;
    box-shadow:4px 4px 12px rgba(0,0,0,.5);
    &:nth-child(2){background:hsl(30, 100%, 50%)}
    &:nth-child(3){background:hsl(60, 100%, 50%)}
    &:nth-child(4){background:hsl(120, 100%, 50%)}
    &:nth-child(5){background:hsl(240, 100%, 50%)}
    &:nth-child(6){background:hsl(270, 100%, 50%)}
  }
}
.dark>li{color:#000}