Z tego artykułu dowiesz się, dlaczego i jak wdrożyliśmy symulację niedoboru widzenia kolorów w DevTools i w renderowaniu Blink.
Tło: zły kontrast kolorów
Tekst o niskim kontraście to najczęstszy problem z ułatwieniami dostępu w internecie, który można wykryć automatycznie.
Według analizy ułatwień dostępu WebAIM dotyczącej 1 miliona najpopularniejszych stron ponad 86% stron głównych ma niski kontrast. Średnio na każdej stronie głównej występuje 36 różnych przypadków tekstu o niskim kontraście.
Wykrywanie, analizowanie i rozwiązywanie problemów z kontrastem za pomocą Narzędzi deweloperskich
Narzędzia deweloperskie w Chrome mogą pomóc deweloperom i projektantom w zwiększeniu kontrastu i wybraniu bardziej dostępnych schematów kolorów w aplikacjach internetowych:
- Wskazówka trybu sprawdzania, która pojawia się u góry strony internetowej, pokazuje współczynnik kontrastu elementów tekstowych.
- Selektor kolorów w Narzędziach deweloperskich wskazuje złe współczynniki kontrastu elementów tekstowych, wyświetla zalecaną linię kontrastu, aby ułatwić ręczne wybieranie lepszych kolorów, a nawet podpowiada kolory z dostępnością.
- Zarówno panel Przegląd CSS, jak i raport Lighthouse dotyczący ułatwień dostępu zawierają listę elementów tekstowych o niskim kontraście, które znajdują się na Twojej stronie.
Niedawno dodaliśmy do tej listy nowe narzędzie, które różni się nieco od pozostałych. Opisane powyżej narzędzia skupiają się głównie na uzyskiwaniu informacji o stosunku kontrastu i udostępnianiu opcji naprawy. Zdaliśmy sobie sprawę, że w DevTools nadal brakuje sposobu na to, aby deweloperzy mogli lepiej zrozumieć ten obszar problemów. Aby rozwiązać ten problem, wprowadziliśmy symulację ślepoty barw na karcie Renderowanie w Narzędziach deweloperskich.
W Puppeteer nowy interfejs API page.emulateVisionDeficiency(type) umożliwia włączanie tych symulacji za pomocą kodu.
ślepota barw,
Około 1 na 20 osób cierpi na zaburzenia rozpoznawania barw (znane też pod mniej dokładnym określeniem „ślepota barw”). Takie zaburzenia utrudniają odróżnianie różnych kolorów, co może pogłębiać problemy z kontrastem.