<div>
  <p>Hello <a href="#">World</a></p>
</div>

<label>Hue <input id="hue" type="range" min=0 max=360 value="20"></label><br />
<label>Saturation <input id="sat" type="range" min=0 max=100 value="60"></label><br>
<label>Lightness <input id="lght" type="range" min=0 max=100 value="80"></label>

<p>♿️⚠️ You probably want 3:1 contrast between the text and link in addition to 4.5:1 between background and link. This is just comparing against the background.</p>
body {
  --hue: 20;
  --sat: 60;
  --lght: 80;
  --bg: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--lght) * 1%));
}

// Color Contrast Magic
div {
  color: color-contrast(var(--bg) vs #ffffff, #000000);

  a {
    color: color-contrast(var(--bg) vs red, lightgreen, blue);
    //color: color-contrast(var(--bg) vs tomato, aquamarine, cornflowerblue);
  }
}

// Div Style
div {
  background-color: var(--bg);
  height: 400px;
  display: grid;
  font-size: 1.5rem;
  place-content: center;
}
View Compiled 
document.querySelector("input#hue").addEventListener("input", (e) => {
  document.body.style.setProperty("--hue", e.target.value);
});
document.querySelector("input#sat").addEventListener("input", (e) => {
  document.body.style.setProperty("--sat", e.target.value);
});
document.querySelector("input#lght").addEventListener("input", (e) => {
  document.body.style.setProperty("--lght", e.target.value);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.