TL;DR
Przycisk może wyglądać świetnie i mieć wzorowy kontrast kolorów, a mimo to zniknąć praktycznie bez śladu, gdy użytkownik włączy tryb wysokiego kontrastu systemu. Powód jest prozaiczny: w trybie wymuszonych kolorów przeglądarka całkowicie ignoruje `box-shadow` — razem z nim znika też wskaźnik focusu, jeśli ktoś oparł go właśnie na tej właściwości.
Rozwiązanie jest proste, ale łatwe do przeoczenia: do oznaczania focusu lepiej użyć `outline`, które tryb wysokiego kontrastu respektuje. Jeśli zależy nam na efekcie z `box-shadow` w zwykłym trybie, warto zostawić też przezroczysty `outline` jako zabezpieczenie, zamiast usuwać go całkiem.
Wniosek z wpisu dotyczy każdego, kto projektuje interfejsy: test w trybie forced-colors (łatwo go włączyć choćby w DevTools Chrome) wart jest tych kilku minut, bo odsłania problemy, których na co dzień nikt nie zauważy.
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ę naszy...
Czytaj cały wpis u źródła// tagi
