> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest/windows-tryb-wysokiego-kontrastu.md).

# Windows - High Contrast Mode

## What is high contrast mode? <a href="#windowstrybwysokiegokontrastu-czymjesttrybwysokiegokontrastu" id="windowstrybwysokiegokontrastu-czymjesttrybwysokiegokontrastu"></a>

High contrast in Windows is an accessibility feature designed to increase text readability and make content easier to read. There are many reasons why someone may enable high contrast in Windows: to see screen elements better, to reduce visual noise and focus better, to ease 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? <a href="#windowstrybwysokiegokontrastu-jakwlaczyctrybwysokiegokontrastu" id="windowstrybwysokiegokontrastu-jakwlaczyctrybwysokiegokontrastu"></a>

The description can be found here: [Microsoft instructions](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 <a href="#windowstrybwysokiegokontrastu-tworzeniestylowdlatrybuwysokiegokontrastu" id="windowstrybwysokiegokontrastu-tworzeniestylowdlatrybuwysokiegokontrastu"></a>

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 applies user colors to semantic HTML elements by default. However, if we want to do so, we can use:

* media query ***forced-colors:*** is used to detect the active forced colors mode, which is essentially equivalent to the high contrast feature in Windows, but in the future similar forced colors modes may appear in other operating systems.
* property ***forced-color-adjust*****:** controls whether the system theme colors should be applied to the element and its descendants.
* media query ***prefers-contrast:*** is used to detect whether the user prefers content presented with lower or higher contrast.<br>

Detailed description with use cases:

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors>

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast>

<https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust>

#### The case when we want to display our color palette to the user anyway <a href="#windowstrybwysokiegokontrastu-przypadekgdychcemyjednakwyswietlicnaszapaletekolorowuzytkownikowi" id="windowstrybwysokiegokontrastu-przypadekgdychcemyjednakwyswietlicnaszapaletekolorowuzytkownikowi"></a>

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><img src="/files/6384c5d902446d25eae9e34773717fd942f02e7d" alt=""><figcaption><p><em><strong>Figure 1.</strong> Default widget</em></p></figcaption></figure>

<figure><img src="/files/27956c089bb12500b655e7f08fafa927a33b4253" alt=""><figcaption><p><em><strong>Figure 2.</strong> High contrast widget</em></p></figcaption></figure>

After using the property *forced-color-adjust: none* :

```
@media (forced-colors: active) {
  .prefs__palette {
     forced-color-adjust: none;
  }
}
```

we will remove the forced system colors, any text backgrounds, and other customized CSS properties from the element and its subtree - essentially, we are rolling back any forced color mode styles. However, we should remember to ensure that the color swatches always render on a pure black or white background so that they look clear regardless of the user's system colors.

<figure><img src="/files/557bbd385a558e817e387bf717810609fc4b961c" alt=""><figcaption><p><em><strong>Figure 3.</strong> Widget after using the forced-color-adjust: none property</em></p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest/windows-tryb-wysokiego-kontrastu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.