The forced-color-adjust CSS property allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS.
forced-color-adjust: value; object.style.forcedColorAdjust = "value"; <'forced-color-adjust'> = auto | none | preserve-parent-color auto Automatically specified by the user agent.
none Not automatically specified by the user agent.
preserve-parent-color If the color property inherits from its parent, then it computes to the used color of its parent’s color value. In all other respects, it behaves the same as none.
<!doctype html>
<html>
<head>
<style>
div
{
background-color: lightyellow;
border-color: yellow;
border-style: solid;
border-width: 10px;
padding: 10px;
}
p
{
background-color: inherit;
border-color: inherit;
border-style: solid;
border-width: 10px;
padding: 10px;
}
@media(forced-colors: active)
{
div
{
forced-color-adjust: none;
}
p
{
forced-color-adjust: none;
}
}
</style>
</head>
<body>
<div>
<p>none</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: lightyellow;
border-color: yellow;
border-style: solid;
border-width: 10px;
padding: 10px;
}
p
{
background-color: inherit;
border-color: inherit;
border-style: solid;
border-width: 10px;
padding: 10px;
}
@media(forced-colors: active)
{
div
{
forced-color-adjust: preserve-parent-color;
}
p
{
forced-color-adjust: preserve-parent-color;
}
}
</style>
</head>
<body>
<div>
<p>preserve-parent-color</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: lightyellow;
border-color: yellow;
border-style: solid;
border-width: 10px;
padding: 10px;
}
p
{
background-color: inherit;
border-color: inherit;
border-style: solid;
border-width: 10px;
padding: 10px;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(innerHTML)">preserve-parent-color</button>
<div>
<p>forced-color-adjust</p>
</div>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("div, p");
for(let myelement of myelements)
{
myelement.style.forcedColorAdjust = myparameter;
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-color: lightyellow;
border-color: yellow;
border-style: solid;
border-width: 10px;
padding: 10px;
}
p
{
background-color: inherit;
border-color: inherit;
border-style: solid;
border-width: 10px;
padding: 10px;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>none</button>
<button>preserve-parent-color</button>
<div>
<p>forced-color-adjust</p>
</div>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("div, p");
for(let myelement of myelements)
{
myelement.style.forcedColorAdjust = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>