<div class="dark">
  <p>Contrast 0%</p>
  <p>Contrast 50%</p>
  <p>Contrast 100%</p>
</div>

<div class="light">
  <p>Contrast 0%</p>
  <p>Contrast 50%</p>
  <p>Contrast 100%</p>
</div>

@use cssnext;

html,
body {
  height: 100%;
}

body {
  display: flex;
  overflow: hidden;
}

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

.dark {
  background: #222;
}

.dark > :nth-child(1) {
  color: color(#222 contrast(0%));
}

.dark > :nth-child(2) {
  color: color(#222 contrast(50%));
}

.dark > :nth-child(3) {
  color: color(#222 contrast(100%));
}

.light {
  background: #eee;
}

.light > :nth-child(1) {
  color: color(#eee contrast(0%));
}

.light > :nth-child(2) {
  color: color(#eee contrast(50%));
}

.light > :nth-child(3) {
  color: color(#eee contrast(100%));
}