forced-color-adjust
Quick Summary for forced-color-adjust
forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.
Code Usage for forced-color-adjust
forced-color-adjust: auto; forced-color-adjust: none; /* Global values */ forced-color-adjust: inherit; forced-color-adjust: initial; forced-color-adjust: revert; forced-color-adjust: unset; More Details for forced-color-adjust
forced-color-adjust
The forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.
Syntax
forced-color-adjust: auto; forced-color-adjust: none; /* Global values */ forced-color-adjust: inherit; forced-color-adjust: initial; forced-color-adjust: revert; forced-color-adjust: unset; The forced-color-adjust property's value must be one of the following keywords.
Values
auto The element's colors are adjusted by the user agent in forced colors mode. This is the default.
none The element's colors are not automatically adjusted by the user agent in forced colors mode.
Usage notes
This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the user agent result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. It should not be used to prevent user choices being respected.
The property is a standardized version of the -ms-high-contrast-adjust property. The prefixed property can be used to achieve similar functionality in Internet Explorer 10 and EdgeHTML versions of Microsoft Edge.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements and text |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
auto | none
Examples
Preserving colors
In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the .box class.
By using the forced-colors media feature you could add any other optimizations for forced color mode alongside the forced-color-adjust property.
.box { border: 5px solid grey; background-color: #ccc; width: 300px; margin: 20px; padding: 10px; } @media (forced-colors: active) { .forced { forced-color-adjust: none; } } <div class="box"> <p>This is a box which should use your color preferences.</p> </div> <div class="box forced"> <p>This is a box which should stay the colors set by the site.</p> </div> The following screenshot shows the image above in Windows High Contrast Mode:
Specifications
| Specification |
|---|
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |
See also
Applying color to HTML elements using CSS Styling for Windows high contrast with standards for forced colors.print-color-adjust Last modified: Feb 7, 2022, by MDN contributors
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
