# Windows - Tryb wysokiego kontrastu

## Czym jest tryb wysokiego kontrastu? <a href="#windowstrybwysokiegokontrastu-czymjesttrybwysokiegokontrastu" id="windowstrybwysokiegokontrastu-czymjesttrybwysokiegokontrastu"></a>

Wysoki kontrast w systemie Windows to funkcja ułatwień dostępu zaprojektowana w celu zwiększenia czytelności tekstu i poprawy łatwości odczytania. Istnieje wiele powodów, dla których dana osoba może włączyć wysoki kontrast w systemie Windows: aby lepiej widzieć elementy na ekranie, aby zmniejszyć szum wizualny i lepiej się skupić, aby złagodzić zmęczenie oczu, migreny lub światłowstręt.

Aplikacje mogą integrować się z kolorami systemowymi użytkownika i dostosować motyw użytkownika do swojego interfejsu, na przykład przeglądarki mogą stosować kolory motywu o wysokim kontraście semantycznie do elementów HTML i dostosowywać niektóre właściwości CSS, aby zmniejszyć szum wizualny.

## Jak włączyć tryb wysokiego kontrastu? <a href="#windowstrybwysokiegokontrastu-jakwlaczyctrybwysokiegokontrastu" id="windowstrybwysokiegokontrastu-jakwlaczyctrybwysokiegokontrastu"></a>

Opis znajdziemy tutaj: [Instrukcja ze strony Microsoftu](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)

## Tworzenie stylów dla trybu wysokiego kontrastu <a href="#windowstrybwysokiegokontrastu-tworzeniestylowdlatrybuwysokiegokontrastu" id="windowstrybwysokiegokontrastu-tworzeniestylowdlatrybuwysokiegokontrastu"></a>

W większości przypadków nie jest wymagane pisanie osobnych reguł CSS dla trybu wysokiego kontrastu, ponieważ platforma webowa zapewnia dobrą czytelność tekstu i domyślnie stosuje kolory użytkownika do elementów semantycznych HTML. Jeśli jednak chcemy to uczynić możemy skorzystać z:

* media query ***forced-colors:*** służy do wykrywania aktywnego trybu wymuszonego koloru co odpowiada w zasadzie funkcji wysokiego kontrastu w systemie Windows, ale potencjalnie w przyszłości mogą pojawić się podobne tryby wymuszonego koloru w innych systemach operacyjnych.
* właściwość ***forced-color-adjust*****:** kontroluje, czy kolory motywu systemowego powinny być zastosowane do elementu i jego elementów potomnych.
* media query ***prefers-contrast:*** służy do wykrywania czy użytkownik woli treść prezentowaną w niższym lub wyższym kontraście.<br>

Dokładny opis z przypadkami użycia:

<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>

#### Przypadek gdy chcemy jednak wyświetlić naszą paletę kolorów użytkownikowi <a href="#windowstrybwysokiegokontrastu-przypadekgdychcemyjednakwyswietlicnaszapaletekolorowuzytkownikowi" id="windowstrybwysokiegokontrastu-przypadekgdychcemyjednakwyswietlicnaszapaletekolorowuzytkownikowi"></a>

Załóżmy, że tworzymy stronę internetową dla usługi, która wysyła ubrania dopasowane do indywidualnych preferencji. Stylujemy następujący widget, który udostępnia użytkownikowi sugerowane palety kolorów:

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fj1Ie9GSUyVa6LEQ5qzRQ%2FZaznaczenie_013.png?alt=media&#x26;token=716e5344-ea47-4884-96f1-aec82eb102db" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Widget w wersji defaultowej</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FNx2qLZKUvbzzGXGfEUiC%2FZaznaczenie_014.png?alt=media&#x26;token=3e3434ed-5417-4a3e-8bed-4f959afd60e4" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Widget w wysokim kontraście</em></p></figcaption></figure>

Po użyciu właściwości *forced-color-adjust: none* :

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

usuniemy wymuszone kolory systemowe, wszelkie tła tekstowe oraz inne dostosowane właściwości CSS z elementu i jego poddrzewa - zasadniczo cofamy wszelkie style trybu wymuszonego koloru. Powinniśmy jednak pamiętać o tym, aby próbki kolorów zawsze renderowały się na czysto czarnym lub białym tle, tak aby wyglądały wyraźnie niezależnie od kolorów systemowych użytkownika.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F2YM0lpeef4fIgjroZmXk%2FZaznaczenie_015.png?alt=media&#x26;token=c43dc9c2-3f6e-4761-92a3-12b57fc93b43" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Widget po użyciu właściwości forced-color-adjust: none</em></p></figcaption></figure>


---

# 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/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest/windows-tryb-wysokiego-kontrastu.md?ask=<question>
```

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.