Wpadki i wypadki #24: ładne przyciski a tryb wysokiego kontrastu

Udalo nam się zaprojektować przyciski. Wyglądają ładnie, a do tego nawet mają odpowiedni współczynnik kontrastu! Po czym ktoś włącza tryb wysokiego kontrastu…

Przyjrzyjmy się naszym przyciskom. Są aż trzy, różniące się pewnymi szczegółami:

1. Pierwszy to tradycyjny button z tradycyjnym wskaźnikiem focusu opartym o własność outline.
2. Drugi to również button, ale w jego przypadku wskaźnik focusu został dodany przy pomocy własności box-shadow.
3. Ostatni przycisk to z kolei element span, który jedynie udaje przycisk.

Na pierwszy rzut oka wszystkie trzy wyglądają tak samo:

Co więcej, ich wskaźnik focusu też wygląda tak samo:

Różnice jednak widać, gdy włączy się tryb wysokiego kontrastu (nazywany technicznie trybem wymuszonych kolorów). W dużym skrócie: niektóre systemy operacyjne pozwalają osobom z nich korzystającym zmienić domyślny systemowy motyw na taki, w którym kolory mają bardzo wysoki współczynnik kontrastu. Ale żeby taki współczynnik zapewnić, system mocno ogranicza paletę dostępnych kolorów i zmienia te wykorzystane na stronie. Tym samym nasz wymuskany burgundowy kolor tekstu na amaryndowym tle możę stać się jaskrawo żółtym tekstem na czarnym tle. Włączenie trybu wysokiego kontrastu powoduje też kilka innych zmian, które niekoniecznie są oczywiste. Spójrzmy, jak wyglądają nasze przyciski po włączeniu trybu wysokiego kontrastu w Windowsie 11:

Jak widać, pierwsze dwa przyciski zmieniły swoje kolory na te narzucone przez system, ale wciąż da się rozpoznać w nich przyciski. Z kolei przycisk oparty na elemencie span stracił swoje obramowanie. Jeszcze ciekawiej się dzieje, gdy sprawdzimy, jak wyglądają wskaźniki focusu:

W tym wypadku pierwszy przycisk, jak i span, mają widoczny wskaźnik focusu. Natomiast środkowy przycisk, ze wskaźnikiem opartym o box-shadow nie ma żadnego.

Zajrzyjmy zatem do opisu trybu wysokiego kontrastu w MDN-ie. Wynika z niego, że wartości własności przyjmujących kolory są nadpisywane kolorami narzucanymi przez system. Z kolei niektóre własności, w tym box-shadow, są całkowicie wyłączane. Innymi słowy: jeśli nasz wskaźnik focusu jest w formie obramowania, najbezpieczniej zrobić go przy użyciu własności outline. Nie znaczy to jednak, że trzeba całkowicie rezygnować ze wskaźnika opartego na cieniu! Istnieje technika pozwalająca na użycie zarówno outline, jak i box-shadow:

button:focus {
	outline-color: transparent;
	box-shadow: 0 0 0 2px navy;
}

Sztuczka polega na nieusuwaniu obramowania, ale na uczynieniu go przezroczystym. Tym samym w trybie wymuszonych kolorów obramowanie zmieni kolor na ten narzucony przez system.

No dobrze, ale czemu zniknęło obramowanie dla elementu span? Ok, przyznaję się, lekko tu oszukałem. Z uwagi na to, że elementy button mają domyślnie ramkę, ukryłem ją tą samą techniką, co opisana powyżej. Zamiast całkowicie usuwać ramkę, ustawiłem własność border-color na transparent (przezroczysty). Dzięki temu dwa pierwsze przyciski zachowały swoje ramki w trybie wymuszonych kolorów. A że span domyślnie nie ma ramki, to po usunięciu tła z przycisków został z niego sam tekst.

A jak testować tryb wymuszonych kolorów? W idealnym świecie: odpalając taki w każdym systemie operacyjnym (a przynajmniej: na Windowsie). Na szczęście jednak Chrome pozwala go emulować. Wówczas kolory zmieniają się na czarno-białe:

W tym trybie wykryć można wspomniane wyżej problemy. I polecam od czasu do czasu sprawdzać, jak strona w nim wygląda. Większość z nas nie korzysta z niego na co dzień, przez co niektóre rzeczy mogą nam umknąć.