# Windows - High Contrast Mode ## What is high contrast mode? High Contrast in Windows is an accessibility feature designed to increase text readability and make it easier to read. There are many reasons why someone may turn on High Contrast in Windows: to better see items on the screen, to reduce visual noise and focus better, to relieve eye strain, migraines, or photophobia. Applications can integrate with the user's system colors and adapt the user's theme to their interface; for example, browsers can apply high-contrast theme colors semantically to HTML elements and adjust some CSS properties to reduce visual noise. ## How do you enable high contrast mode? The description can be found here: [Instruction from Microsoft](https://support.microsoft.com/pl-pl/windows/w%C5%82%C4%85czanie-lub-wy%C5%82%C4%85czanie-trybu-du%C5%BCego-kontrastu-w-systemie-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025#ID0EBD=Windows_10) ## Creating styles for high contrast mode In most cases, it is not necessary to write separate CSS rules for high contrast mode, because the web platform provides good text readability and by default applies user colors to semantic HTML elements. However, if we want to do this, we can use: * media query ***forced-colors:*** is used to detect the active forced-colors mode, which essentially corresponds to the High Contrast feature in Windows, but potentially similar forced-colors modes may appear in other operating systems in the future. * property ***forced-color-adjust*****:** controls whether the system theme colors should be applied to the element and its descendant elements. * media query ***prefers-contrast:*** is used to detect whether the user prefers content presented in lower or higher contrast.
Detailed description with use cases: #### The case when we still want to display our color palette to the user Let's assume we are creating a website for a service that sends clothes tailored to individual preferences. We style the following widget, which provides the user with suggested color palettes:

Figure 1. Widget in default version

Figure 2. Widget in high contrast

After using the property *forced-color-adjust: none* : ``` @media (forced-colors: active) { .prefs__palette { forced-color-adjust: none; } } ``` we will remove the system forced colors, any text backgrounds, and other adjusted CSS properties from the element and its subtree - essentially, we revert any forced-colors mode styles. However, we should remember to make sure that the color swatches always render against a pure black or white background so that they look clear regardless of the user's system colors.

Figure 3. Widget after using the forced-color-adjust: none property

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest/windows-tryb-wysokiego-kontrastu.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.