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