Omówienie 3 narzędzi i technik testowania i weryfikowania kontrastu kolorów w projektach pod kątem ułatwień dostępu.
Załóżmy, że masz tekst na jasnym tle:
Chociaż wszystkie przykłady mogą być dla Ciebie czytelne, nie wszyscy użytkownicy będą mogli je odczytać.
Dostępny kontrast kolorów to praktyka, która zapewnia, że tekst jest czytelny dla wszystkich. Czasami testowanie kontrastu jest łatwe, a czasami bardzo trudne. Pod koniec tego artykułu będziesz mieć 3 nowe narzędzia i techniki do sprawdzania, poprawiania i weryfikowania kontrastu w projektach stron internetowych, dzięki którym poradzisz sobie z najtrudniejszymi scenariuszami.
WCAG i kontrast kolorów
W3C opracowana przez W3C inicjatywa Web Accessibility Initiative udostępnia strategie, standardy i zasoby, dzięki którym internet jest dostępny dla jak największej liczby osób. Wytyczne, na których opierają się te standardy, to wytyczne Web Content Accessibility Guidelines (WCAG). Najnowsza stabilna wersja WCAG 2.1 obejmuje ważne wymagania dotyczące dostępności: minimalny kontrast.
Związek między 2 kolorami w standardzie WCAG 2.1 jest opisywany za pomocą współczynnika kontrastu, czyli liczby uzyskanej po porównaniu luminancji 2 kolorów. Luminancja to sposób określenia, jak bliski jest kolor czarnego (0%) lub białego (100%). WCAG określa pewne reguły i algorytmy obliczania współczynnika kontrastu, który powinien być stosowany w internecie, aby zapewnić dostępność. W przypadku tego obliczenia występują jednak znane problemy. Ostatecznie zostanie przyjęta jeszcze bardziej niezawodna metoda, ale obecnie WCAG jest najlepszym rozwiązaniem.
Jakie są zasady?
Wyższy współczynnik kontrastu jest oceniany wyższą liczbą, np. 4,5 lub 7 zamiast 3. Aby dowiedzieć się więcej o tabeli punktacji, skorzystaj z narzędzia do sprawdzania kontrastu w Polypane.
Testowanie kontrastu między kolorami
Wiemy już, czego szukamy. Jak to przetestować? Oto trzy bezpłatne narzędzia, które pomogą Ci sprawdzać, korygować i mierzyć kontrast w witrynie. Przedstawione zostaną mocne i słabe strony każdego z nich, aby można było w przekonujący sposób przetestować dostępność kolorów i treści witryny na wiele sposobów.
- Pika
Aplikacja na macOS, która umożliwia wyświetlanie kontrastu dowolnych kolorów na całym ekranie, kolorów na gradientach, kolorów z przezroczystością i innych. Intencja jest wyraźna, a użytkownicy ręcznie wybierają piksele do porównania. Odrobinę mniej zautomatyzowany i z ogromną gamą funkcji. - VisBug
Rozszerzenie działające w różnych przeglądarkach, które może wyświetlać więcej niż 1 warstwę kontrastu naraz, ale podobnie jak DevTools czasami nie jest w stanie wykryć intencji. - Narzędzia deweloperskie w Chrome
Narzędzia deweloperskie są wbudowane w Chrome i zawierają wiele sposobów sprawdzania, poprawiania i debugowania problemów z kolorami. Podczas sprawdzania gradientów i kolorów półprzezroczystych występują jednak błędy, przez co czasami nie jest w stanie wykryć intencji.
Pika (aplikacja na macOS)
Jeśli Narzędzia deweloperskie lub VisBug nie mogą prawidłowo ocenić kontrastu, np. gdy musisz przetestować kolor poza przeglądarką albo gdy chodzi o przezroczystość lub gradienty, Pika uratuje świat. Pika ma dostęp do każdego piksela na ekranie, ponieważ jest to narzędzie systemowe, a nie internetowe.
Oznacza to też, że UX w Pika różni się od DevTools czy VisBug. DevTools i VisBug starają się wyświetlać kolory tekstu i tła z DOM przeglądarki, podczas gdy kolory porównywane przez Pika są wybierane ręcznie z dowolnego miejsca na ekranie. Daje to więcej możliwości sterowania Pika i otwiera dodatkowe możliwości zastosowania:
- Przez porównywanie dowolnych 2 kolorów niezależnie od tego, czy są widoczne w przeglądarce, czy nie – jeśli widać ten kolor na ekranie, możesz go przetestować.
- Porównywanie kolorów z przezroczystością.
- Porównywanie kolorów w gradientach.
- Porównywanie kolorów za pomocą trybów mieszania, takich jak mix-blend-mode w CSS.
Porównanie dowolnych 2 kolorów
Porównywanie tekstu z kolorem tła:
Porównaj kolory kreski i wypełnienia grafiki wektorowej:
Porównywanie kolorów z przezroczystością
Porównaj kolor tekstu z różnymi próbkami pikseli tła. Tutaj jako kolor tła do porównania użyto najjaśniejszego szarego z efektem matowego szkła.
Porównywanie kolorów z gradientami
Porównaj tekst na gradientzie lub na obrazie. Oto litera L z „Lasso” porównana z jasnoniebieskim kolorem obrazu:
VisBug
VisBug to narzędzie inspirowane FireBug, które pozwala projektantom i programistom wizualnie sprawdzać, debugować i modyfikować wygląd witryny. Dzięki emulacji interfejsu i UX narzędzi do projektowania, których użytkownicy już znają i uwielbiają używać, będą mieli niższą barierę wejścia niż Narzędzia deweloperskie w Chrome.
Wypróbuj VisBug lub zainstaluj tę aplikację w Chrome, Firefox, Edge, Brave lub Safari.
Jednym z tych narzędzi jest narzędzie Accessibility Inspect.
Sprawdzanie w różnych przeglądarkach (nawet na urządzeniach mobilnych)
Po kliknięciu narzędzia do inspekcji ułatwień dostępu informacje o ułatwieniach dostępu, które wskaże użytkownik lub do których dojdzie za pomocą klawiatury, będą raportowane w etykietce. Ta etykietka zawiera porównanie kolorów wykrytych kolorów pierwszego planu i tła.
Sprawdzanie co najmniej 1 lub wielu
W DevTools możesz sprawdzić pojedyncze połączenie kolorów lub uzyskać raport ze wszystkimi połączeniami kolorów na stronie, ale VisBug oferuje kompromis, umożliwiając łączenie wielu kolorów. Po kliknięciu elementu etykietka nie zostanie umieszczona na stronie. Przytrzymaj klawisz Shift i klikaj inne elementy, aby wszystkie etykiety narzędzia pozostały na miejscu:
Jest to szczególnie ważne w przypadku projektów opartych na komponentach, w których wiele części komponentu musi spełniać wymagania dotyczące współczynnika kontrastu. Ta metoda umożliwia wyświetlanie wszystkich komponentów jednocześnie. Jest też przydatny do przeglądania projektów.
Narzędzia deweloperskie w Chrome
Jeśli masz zainstalowaną przeglądarkę Chrome, masz już wiele narzędzi do testowania kontrastu:
- selektora kolorów,
- Etykieta inspekcji
- Przegląd usługi porównywania cen
- Lighthouse
- Konsola JS
- Narzędzia do emulacji dla osób z zaburzeniami widzenia barw
- Emulacja ustawień kontrastu kolorów systemu
- Eksperyment WCAG 3.0 APCA
Selektor kolorów w Narzędziach deweloperskich w Chrome
W panelu Styl w Narzędziach dewelopera Chrome obok wartości kolorów będzie widoczna mała próbka koloru. Po kliknięciu próbnika pojawi się selektor kolorów. Jeśli to możliwe, środek narzędzia pokazuje kontrast koloru względem pierwszego planu lub tła.
W przykładzie poniżej selektor kolorów jest otwarty dla wartości koloru właściwości niestandardowej. Współczynnik kontrastu ma wartość 15,79 i 2 zielone znaczniki wyboru, co oznacza, że spełnia on wymagania standardu WCAG 2.1 na poziomie AA i AAA:
Autokorekta selektora kolorów
Widzenie wyniku podczas wybierania kolorów jest przydatne, ale Narzędzia deweloperskie w Chrome mają dodatkową funkcję autokorekty. Jeśli selektor kolorów poda niewystarczający wynik kontrastu kolorów, możesz go rozwinąć, aby wyświetlić wartości docelowe AA i AAA, a także narzędzie zakraplacza. Obok AA i AAA znajdują się próbki kolorów oraz ikona odświeżania, która po kliknięciu znajdzie najbliższy pasujący kolor:
Jeśli nie jesteś wybredny, jeśli chodzi o kolory, funkcja automatycznej korekty to świetny sposób na spełnienie wytycznych dotyczących ułatwień dostępu i wykonanie zadania bez zbytniego wysiłku.
Etykieta inspekcji
Narzędzie do zaznaczania elementów ma specjalną funkcję, która podczas najeżdżania kursorem na stronę podaje informacje o ogólnym czcionce, kolorze i dostępności. Narzędzie do zaznaczania elementów to ikona po lewej stronie na poniższym zrzucie ekranu. To pole z strzałką w prawym dolnym rogu. Można go też wybrać za pomocą skrótu klawiszowego Control+Shift+C (lub Command+Shift+C w systemie macOS).
Po aktywacji ikona zmieni kolor na niebieski, a wskazanie dowolnego elementu na stronie spowoduje wyświetlenie tego menu skrótu:
Zamiast narzędzia do wybierania kolorów, które wymaga znalezienia próbnika kolorów w panelu Style, to narzędzie pozwala po prostu wskazać na stronie miejsce, w którym chcesz sprawdzić wartość kontrastu. Podobnie jak selektor kolorów może wyświetlać tylko 1 wartość kontrastu naraz.
Bump bump 'til you pass 🎶
Często sprawdzam pary kolorów za pomocą tego narzędzia do szybkiego sprawdzania i okazuje się, że brakuje im niewiele do spełnienia wymaganego współczynnika. Zamiast korzystać z funkcji autokorekty selektora kolorów (ponieważ jestem wybredny), przesuwam kanały kolorów w arkuszu CSS i patrzę, aż uzyskam potrzebne współczynniki. Nazywam ten proces „bump bump til you pass”, ponieważ podwyższam numery kanałów kolorów, aż spełnią wymagania WCAG 2.1.
Należy wykonać te czynności w podanej kolejności:
- W panelu Styli ustaw zaznaczenie klawiatury w kolorze.
- Narzędzie do sprawdzania elementów aktywuj za pomocą skrótu klawiszowego
Control+Shift+C(lubCommand+Shift+Cw systemie macOS). - Wskaż na cel.
- Naciśnij strzałkę w górę lub w dół, aby zmienić liczby w wartości koloru.
Jest to możliwe, ponieważ wartość stylu CSS nadal jest aktywna przez klawiaturę, a mysz umożliwia wskazanie elementu docelowego. Pamiętaj, aby nie klikać celu, ponieważ zaznaczenie nie zostanie przeniesione z obszaru wartości koloru, ani nie powodować przesunięcia wartości do momentu zmiany ostrości.
Przegląd CSS
Do tej pory Narzędzia deweloperskie Chrome umożliwiały sprawdzanie pojedynczych par kolorów, ale przegląd CSS może zindeksować całą stronę i wyświetlić wszystkie niedostępne pary jednocześnie:
Więcej informacji o tej funkcji znajdziesz w artykule Omówienie CSS: określanie potencjalnych ulepszeń w arkuszu CSS lub w serii filmów na kanale YouTube autorstwa Jecelyn Yeen, w której omawia ona określanie potencjalnych ulepszeń w arkuszu CSS za pomocą panelu przeglądu CSS.
Latarnia morska
Lighthouse to kolejne narzędzie kontroli dostępne w Narzędziach deweloperskich w Chrome. Może on indeksować Twoją stronę i zgłaszać niedostępne zestawienia kolorów. Zawiera zrzuty ekranu przedstawiające każdą parę kolorów Każda nieudana kombinacja będzie miała negatywny wpływ na wynik Lighthouse.
Oto, jak mogą wyglądać takie wyniki:
Konsola JS
Być może nie wszystkie wymienione do tej pory narzędzia są dostępne w Twojej lokalizacji. Może (cały dzień) to JavaScript. Eksperyment do wypróbowania Podczas tworzenia strony w panelu Problemy w konsoli mogą być stale zgłaszane wszelkie problemy z dostępnością związane z kontrastem kolorów. Włącz tę funkcję w sekcji Ustawienia > Eksperymenty, jak pokazano na ilustracji:
Następnie otwórz panel Problemy i sprawdź, czy zostały w nim znalezione jakieś problemy. W takim przypadku mogą wyglądać tak:
Emulacja osób z zaburzeniem rozpoznawania barw
Jeśli chodzi o kontrast kolorów i dostępność par kolorów, warto wspomnieć o narzędziu do emulacji wad wzroku. Spowoduje to zmianę kolorów lub wyglądu projektu, aby zademonstrować efekty stosowania daltonistów z różnych odmian, dając możliwość modyfikacji projektu tak, aby kolor nie był jedynym sposobem, w jaki interfejs komunikuje się użytkownikowi.
Użycie koloru do przedstawienia informacji wyłącznie w kolorze, na przykład czerwonego oznacza złe, a zielonego – dobrego, nie jest bezpieczną praktyką w zakresie ułatwień dostępu. Niektórzy użytkownicy nie widzą zielonych ani czerwonych kolorów tak samo, a to narzędzie do emulacji pomoże Ci to zrozumieć i zapamiętać.
Emulacja preferencji systemowych dotyczących kontrastu kolorów
Coraz więcej użytkowników zmienia ustawienia kontrastu w systemie operacyjnym, co pozwala im na proszenie o personalizację kontrastu w interfejsie. CSS może korzystać z tego ustawienia, tak jak w przypadku preferencji jasnego lub ciemnego motywu. Narzędzia programistyczne Chrome umożliwiają emulowanie tej opcji, dzięki czemu można testować projekty i dostosowywać je do żądań użytkownika bez zmiany ustawień w systemie.
Wypróbuj wytyczne WCAG 3.0 APCA
Innym eksperymentem, który możesz przeprowadzić, jest testowanie par kolorów za pomocą eksperymentalnego systemu punktacji współczynnika kolorów APCA. Ta funkcja jest dostępna w sekcji Ustawienia > Eksperymenty. Zastępuje system współczynników WCAG 2.1 nowszym i ulepszonym algorytmem sprawdzania kontrastu, który pozwala wyświetlić podgląd wyników, gdy propozycja jest testowana pod kątem zgodności ze standardem.
Po włączeniu tej opcji możesz wyświetlić punkty informacji o kontroli lub selektor kolorów, aby sprawdzić wynik dopasowania kolorów i sprawdzić, czy spełnia on wymagania:
Podsumowanie
Kontrast kolorów jest ważnym elementem ułatwień w internecie. Ich przestrzeganie sprawia, że internet jest bardziej przydatny dla jak największej liczby osób w najróżniejszych sytuacjach. Mamy nadzieję, że te 3 narzędzia pomogą Ci w wybieraniu odpowiednich kolorów.