<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.