Windows - Tryb wysokiego kontrastu

Czym jest tryb wysokiego kontrastu?

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?

Opis znajdziemy tutaj: Instrukcja ze strony Microsoftu

Tworzenie stylów dla trybu wysokiego kontrastu

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.

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

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:

Ilustracja 1. Widget w wersji defaultowej

Ilustracja 2. Widget w wysokim kontraście

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.

Ilustracja 3. Widget po użyciu właściwości forced-color-adjust: none