OFFLINE Tests of the colors, for this please save it locally and open it to compare the color of your OS theme(so before/after), WEB and more color spaces.
When the @media prefers-contrast is set to no-preference, it means neither more, less, nor none.
If the background is light green, it indicates that your JavaScript is functioning correctly and the declaration has not been altered, unlike when @media scripting is set to none or initial-only, otherwise, the background will be orange.
A border width of 2 pixels suggests your browser is in a light theme, while 4 pixels indicate a dark theme, and 1 pixel means neither.
In high contrast mode, red borders are used, which is generally not recommended.
If the border width is exaggerated, like 10px, consider that your screen may be using an interlace technology that could affect rendering engines like Vulkan. Test with Directx (which involves at least 3 flag options).
If the background is red, check forced-color-adjust.
If the fonts are grey, there may be an issue with the forced-colors flag; disable it even if it's on the default value or poorly configured.
If the borders change to orange, forced color is clearly active; disable it immediately!
* : Borders only around the page(title or the second button with text in red)
List of values accepted to replace the "color:" value in CSS :
Here are the unreadable fonts, it is normal because color are from the OS, and the enhanced input with red touch.
_ _ _ _ _ Means the current OS theme
_sRGB_ Means your default computed value using sRGB.
* *__oklch__Is a new way to convert the color into 10 and more bits compatible screen and color spaces, particularly polar color space. _ _ _ _ _ _* *_ - ___ButtonBorder(Base border color of controls) _ _ _ _ _ _* *_ - ___ButtonFace(Background color of controls) _ _ _ _ _ _* *_ - ___ButtonText(Text color of controls) _ _ _ _ _ _* *_ - ___Canvas(Background of application content or documents) _ _ _ _ _ _* *_ - ___CanvasText(Text color in application content or documents) WHOLE LINE --->_ _ _ _ _ _* *_ - ___Field(Background of input fields)
_ _ _ _ _ _* *_ - ___FieldText(Text in input fields) _ _ _ _ _ _* *_ - ___GrayText(Text color for disabled items (e.g. a disabled control)) _ _ _ _ _ _* *_ - ___Highlight(Background of selected items) _ _ _ _ _ _* *_ - ___HighlightText(Text color of selected items) _ _ _ _ _ _* *_ - ___Mark (Background of text that has been specially marked (such as by the HTML mark element)) _ _ _ _ _ _* *_ - ___MarkText(Text that has been specially marked (such as by the HTML mark element)) _ _ _ _ _ _* *_ - ___SelectedItem(Background of selected items, for example, a selected checkbox _ _ _ _ _ _* *_ - ___SelectedItemText(Text of selected items) _ _ _ _ _ _* *_ - ___AccentColor(Background of accented user interface controls) _ _ _ _ _ _* *_ - ___AccentColorText(Text of accented user interface controls) _ _ _ _ _ _* *_ - ___ActiveText(Text of active links) _ _ _ _ _ _* *_ - ___LinkText(Text of non-active, non-visited links) _ _ _ _ _ _* *_ - ___VisitedText(Text of visited links)
Please disregard the most recently visited color. It functions in the operating system or on the web but is not reported here. A system color value can be used wherever a color can be used. Note that these keywords are not case-sensitive, but are presented here in mixed case for easier readability.
With the OS theme activated, only the inputs that display borders in orange (such as in Stylus interface buttons and some websites) and the yellow marks line are surrounded by a cyan color, even though all lines use it for all borders as you can observe in all the eligible and visible lines at the bottom.
Note the WSB color space CSS function has not been yet used, HSL is often used.