<div class="light">
  <h5>👍 Darker = more contrast</h5>
  <figure>
    <span class="Swatch">A</span>
    <span class="Swatch">B</span>
    <span class="Swatch">C</span>
  </figure>
  <figure>
    <span class="Swatch hover">A</span>
    <span class="Swatch hover">B</span>
    <span class="Swatch hover">C</span>
  </figure>
</div>

<div class="dark">
  <h5>👎 Darker = less contrast</h5>
  <figure>
    <span class="Swatch">A</span>
    <span class="Swatch">B</span>
    <span class="Swatch">C</span>
  </figure>
  <figure>
    <span class="Swatch hover">A</span>
    <span class="Swatch hover">B</span>
    <span class="Swatch hover">C</span>
  </figure>
</div>

@use cssnext;

html,
body {
  height: 100%;
}

body {
  display: flex;
  overflow: hidden;
}

body > div {
  flex: 1;
  padding: 1em;
}

figure {
  display: flex;
  margin: 0;
}

.dark {
  background: #222;
  color: color(#222 contrast(50%))
}

.light {
  background: #eee;
}

.Swatch {
  display: block;
  flex: 1;
  font-weight: bold;
  margin: .25em;
  line-height: 1;
  padding: .5em 1em;
  text-align: center;
}

.Swatch:nth-child(1) {
  color: #bf0803;
}

.Swatch:nth-child(1).hover {
  color: color(#bf0803 lightness(- 15%));
}

.Swatch:nth-child(2) {
  color: #4f7d56;
}

.Swatch:nth-child(2).hover {
  color: color(#4f7d56 lightness(- 15%));
}

.Swatch:nth-child(3) {
  color: #5c6c9a;
}

.Swatch:nth-child(3).hover {
  color: color(#5c6c9a lightness(- 15%));
}