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ć czytelne dla Ciebie, nie jest tak w przypadku wszystkich użytkowników.
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. Do końca tego artykułu poznasz 3 nowe narzędzia i techniki sprawdzania, poprawiania i weryfikowania kontrastu w projektach stron internetowych, dzięki którym poradzisz sobie z najtrudniejszymi scenariuszami.
WCAG i kontrast kolorów
Inicjatywa W3C dotycząca ułatwień dostępu w internecie udostępnia strategie, standardy i zasoby, które mają zapewnić dostęp do internetu jak największej liczbie 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 opisywania tego, jak bardzo dany kolor jest zbliżony do czerni (0%) lub bieli (100%). WCAG określa pewne reguły i algorytmy obliczeniowe dotyczące tego, jaki stosunek kontrastu musi być zachowany, aby strona była dostępna. Z tym obliczeniem wiążą się 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 3 bezpłatne narzędzia, które pomogą Ci sprawdzić, skorygować i zmierzyć kontrast witryny. Omówimy ich mocne i słabe strony, aby umożliwić Ci skuteczne testowanie ułatwień dostępu w kolorach i treściach 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. Nieco mniej zautomatyzowany, ale z wielkimi możliwościami. - 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ą różne sposoby sprawdzania, poprawiania i debugowania problemów z kolorami, ale mają pewne ograniczenia w przypadku gradientów i półprzezroczystych kolorów, a czasami nie są w stanie wykryć intencji.
Pika (aplikacja na macOS)
Jeśli narzędzia deweloperskie lub VisBug nie mogą prawidłowo ocenić kontrastu, np. gdy chcesz przetestować kolor poza przeglądarką lub gdy w grę wchodzą przezroczystość lub gradienty, Pika może Ci pomóc. 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:
- Porównywanie dowolnych 2 kolorów niezależnie od tego, czy znajdują się one w przeglądarce – jeśli widzisz je na ekranie, możesz je 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ównaj tekst 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. Ma ono niższy próg wejścia niż Narzędzia programistyczne Chrome, ponieważ emuluje interfejs użytkownika i doświadczenia związane z narzędziami do projektowania, które są dobrze znane i lubiane przez użytkowników.
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 sprawdzania ułatwień dostępu wszystkie elementy, na które użytkownik wskazuje lub do których przechodzi za pomocą klawiatury, będą miały w tooltipie informacje o ułatwieniach dostępu. 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. VisBug oferuje kompromis, pozwalając na tworzenie wielu połączeń kolorów. Kliknij element, a ikona pozostanie na miejscu. Przytrzymaj klawisz Shift i klikaj inne elementy, aby nie wyświetlały się żadne etykietki:
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:
- Selektor kolorów
- Etykieta inspekcji
- Przegląd usługi porównywania cen
- Lighthouse
- Konsola JS
- Narzędzia do emulacji dla osób niedowidzących barwy
- Emulacja preferencji kontrastu kolorów systemu
- Eksperyment dotyczący APCA w ramach WCAG 3.0
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, środkowa część narzędzia będzie pokazywać kontrast koloru na tle lub na pierwszym planie.
W poniższym przykładzie selektor kolorów jest otwarty dla wartości koloru niestandardowej usługi. 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
Wyświetlanie 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 następującego menu szybkiego sprawdzania:
W przeciwieństwie do 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ć kontrast. 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 używać funkcji automatycznej korekty selektora kolorów (bo jestem wybredna), przesuwam kanały kolorów w CSS i obserwuję, aż uzyskam pożądany współczynnik. 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:
- Ustaw zaznaczenie klawiatury w kolorze w panelu Style.
- Aktywuj narzędzie do sprawdzania elementów 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.
Działa to, ponieważ wartość stylu CSS nadal jest zaznaczona na klawiaturze, a mysz umożliwia wskazywanie celu. Nie klikaj celu, ponieważ w przeciwnym razie punkt skupienia przestanie znajdować się w obszarze wartości koloru i nie będzie można zmieniać wartości, dopóki nie zostanie on ponownie ustawiony.
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órych omawia ona określanie potencjalnych ulepszeń w arkuszu CSS za pomocą panelu przeglądu CSS.
Latarnia morska
Lighthouse to kolejne narzędzie do przeprowadzania audytów w Narzędziach deweloperskich w Chrome. Może indeksować Twoją stronę i zgłaszać niedostępne zestawienia kolorów. Zawiera on małe zrzuty ekranu z połączeniemi kolorów, które możesz sprawdzić i ocenić. 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 dla 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ć wyniki różnych rodzajów dyschromatopsji. Dzięki temu możesz zmodyfikować projekt, aby kolor nie był jedynym sposobem komunikacji interfejsu z użytkownikiem.
Używanie kolorów wyłącznie do przedstawiania informacji (np. czerwony oznacza zły stan, a zielony – dobry) nie jest bezpieczną praktyką w zakresie ułatwień dostępu. Niektórzy użytkownicy nie widzą zielonego ani czerwonego w taki sam sposób, a to narzędzie do emulacji pomoże Ci zrozumieć i zapamiętać te różnice.
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 przełączania 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. Włączona w sekcji Ustawienia > Eksperymenty, zastępuje system współczynników WCAG 2.1 nowszym i ulepszonym algorytmem sprawdzania kontrastu, umożliwiając wyświetlanie podglądu wyników w trakcie wdrażania standardu.
Po włączeniu tej opcji możesz użyć informacji o punkcie lub selektora 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.