Omówienie 3 narzędzi i technik testowania i weryfikacji dostępnego kontrastu kolorów w projekcie.
Załóżmy, że masz tekst na jasnym tle, na przykład:
Wszystkie przykłady mogą być czytelne, ale nie dla wszystkich.
Ułatwienia dostępu w kontrastach kolorów sprawiają, że tekst jest czytelny dla wszystkich. Testowanie kontrastu jest łatwe, a czasami naprawdę trudne. Pod koniec tego postu poznasz 3 nowe narzędzia i techniki, które pozwolą Ci sprawdzać, poprawiać i weryfikować kontrast projektowania witryn, dzięki czemu poradzą sobie w najtrudniejszych sytuacjach.
WCAG i kontrast kolorów
Web Accessibility Initiative organizacji W3C przygotowuje strategie, standardy i zasoby, dzięki którym internet będzie dostępny dla jak największej liczby osób. Wytyczne, na których opierają się te standardy, określają się jako Web Content Accessibility Guidelines (WCAG). Najnowsza stabilna wersja WCAG 2.1 obejmuje ważne wymaganie związane z ułatwieniami dostępu: minimalny kontrast.
Zależność między dwoma kolorami w WCAG 2.1 opisuje współczynnik kontrastu, czyli liczbę widoczną podczas porównywania luminancji dwóch kolorów. Luminacja oznacza stopień dopasowania koloru do czerni (0%) lub bieli (100%). WCAG definiuje pewne reguły i algorytmy obliczeniowe określające, jaki współczynnik kontrastu musi być potrzebny, aby internet był dostępny. W przypadku tych obliczeń występują jednak znane problemy. Docelowo zostanie wprowadzony jeszcze bardziej niezawodny sposób, ale obecnie WCAG jest najlepszym, jaki dysponujemy.
Jakie są zasady?
Wyższy współczynnik kontrastu jest określany przez wyższą liczbę, np.4,5 lub 7 zamiast 3. Aby dowiedzieć się więcej o tej tabeli punktacji, skorzystaj z narzędzia Polypane's do sprawdzania kontrastu.
Testowanie kontrastu między kolorami
Skoro wiemy już, czego szukamy, jak to sprawdzić? Oto 3 bezpłatne narzędzia, które pomogą Ci sprawdzić, poprawić i zmierzyć kontrast witryny. Pokażemy w nich mocne i słabe strony każdego z nich, co pozwoli Ci na wiele sposobów testować dostępność kolorów i treści w Twojej witrynie.
- Pika
Aplikacja dla systemu macOS, która potrafi zaprezentować kontrast dowolnych kolorów na całym ekranie, kolorów gradientu, kolorów z przezroczystością itd. Intencja jest jawna – użytkownicy ręcznie wybierają piksele do porównania. Trochę mniej automatyczne i duże dodatkowe funkcje. - VisBug
Rozszerzenie do wielu przeglądarek, które może wyświetlać jednocześnie więcej niż jedną nakładkę kontrastową, ale tak jak Narzędzia deweloperskie, czasami nie wykrywa intencji. - Narzędzia deweloperskie w Chrome
DevTools są wbudowane w Chrome i oferują wiele sposobów sprawdzania, poprawiania i debugowania problemów z kolorami, jednak w przypadku sprawdzania gradientów i półprzezroczystych kolorów nie potrafią wykryć intencji.
Pika (aplikacja w systemie macOS)
Jeśli Narzędzia deweloperskie lub VisBug nie potrafią prawidłowo ocenić kontrastu, np. gdy trzeba przetestować kolor poza przeglądarką lub jeśli wymagana jest przezroczystość lub gradienty, Pika pomoże Ci ocalić świat. Pika ma dostęp do każdego piksela na ekranie, ponieważ jest to narzędzie systemowe, a nie narzędzie internetowe.
Oznacza to również, że interfejs Pika różni się w zależności od interfejsu Narzędzi deweloperskich lub VisBug. Narzędzia deweloperskie i VisBug robią wszystko, co możliwe, aby wyświetlać kolory tekstu i tła pochodzące z DOM przeglądarki, a kolory porównywane przez Pika są wybierane ręcznie z dowolnego punktu na ekranie. Daje to Pika większą kontrolę i otwiera dodatkowe przypadki użycia:
- Porównanie dowolnych dwóch kolorów niezależnie od tego, czy są widoczne w przeglądarce – możesz to przetestować, jeśli widzisz kolor na ekranie.
- Porównanie kolorów z przezroczystością.
- Porównywanie kolorów w obrębie gradientów.
- Porównanie kolorów, które korzystają z trybów mieszania, np. trybu mieszania w CSS.
Porównanie dowolnych dwóch kolorów
Porównywanie tekstu z kolorem tła:
Porównaj kolory kreski i wypełnienia grafiki wektorowej:
Porównanie kolorów i przezroczystości
Porównaj kolor tekstu z różnymi przykładowymi pikselami tła. Tutaj jako porównanie koloru tła używany jest najjaśniejszy szary kolor z efektu oszronionego szkła.
Porównanie kolorów z gradientami
Porównaj tekst na gradientu lub na obrazie. Tutaj porównamy „Lasso” z jasnoniebieskim kolorem zdjęcia:
VisBug
VisBug to oparte na języku FireBug narzędzie dla projektantów i programistów, które umożliwia przeglądanie i debugowanie stron internetowych oraz ich modyfikowanie. Dzięki emulowaniu interfejsu i UX narzędzi do projektowania, których ludzie się znają i lubią, łatwiej jest korzystać z Narzędzi deweloperskich w Chrome.
Wypróbuj VisBug lub zainstaluj w Chrome, Firefoksie, Edge, Brave lub Safari.
Jednym z nich jest narzędzie do sprawdzania ułatwień dostępu.
Sprawdź w różnych przeglądarkach (nawet na urządzeniach mobilnych)
Po kliknięciu narzędzia do sprawdzania ułatwień dostępu wszystkie informacje o ułatwieniach dostępu, które użytkownik wskaże lub do których przejdzie za pomocą klawiatury, pojawią się w etykietce. Ta etykietka zawiera porównanie kolorów między wykrytymi kolorami pierwszego planu i tła.
Sprawdź co najmniej 1
Narzędzia deweloperskie mogą przyjrzeć się parze w jednym kolorze lub wyświetlić raport na temat wszystkich par kolorów na stronie, ale rozwiązanie VisBug może znaleźć dobry środek, ponieważ umożliwia użycie wielu par kolorów. Kliknij element, a etykietka pozostanie niezmieniona. Przytrzymaj Shift i klikaj kolejne elementy, a wszystkie etykietki pozostaną w tym miejscu:
Jest to szczególnie ważne w przypadku projektowania opartego na komponentach, gdzie wiele części komponentu musi przekazywać wyniki współczynnika kontrastu. Ta metoda umożliwia zobaczenie wszystkich części naraz. Świetnie sprawdza się również w przypadku ocen projektowych.
Narzędzia deweloperskie w Chrome
Jeśli masz zainstalowaną przeglądarkę Chrome, masz do dyspozycji wiele narzędzi do testowania kontrastu:
- Selektor kolorów
- Etykieta inspekcji
- Omówienie usługi porównywania cen
- Lighthouse
- Konsola JS
- Narzędzia do emulacji daltonizmu
- Emulacja preferencji kontrastu kolorów
- Eksperyment WCAG 3.0 APCA
Selektor kolorów w Narzędziach deweloperskich w Chrome
Obok wartości kolorów w panelu Style Narzędzi deweloperskich w Chrome obok wartości kolorów będzie widoczna mała wizualna kwadratowa próbka kolorów. Po kliknięciu próbki zobaczysz selektor kolorów. W miarę możliwości w środku narzędzia będzie widoczny 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. Wynik współczynnika kontrastu wynosi 15,79 i ma dwa zielone znaczniki wyboru, co oznacza, że wynik spełnia wymagania AA i AAA WCAG 2.1:
Autokorekta selektora kolorów
Sprawdzanie wyniku podczas wybierania kolorów jest przydatne, ale w Narzędziach deweloperskich w Chrome możesz skorzystać z dodatkowej funkcji autokorekty. Gdy selektor kolorów zgłosi niedziałający wynik kontrastu kolorów, można go rozszerzyć, aby zobaczyć docelowe wyniki AA i AAA, a także narzędzie zakraplacza. Obok AA i AAA znajdują się próbki i ikona odświeżania, która po kliknięciu pozwala znaleźć najbliższy kolorowy wynik:
Jeśli nie przesadzasz z wyborem kolorów, funkcja autokorekty to świetny sposób na przestrzeganie wytycznych dotyczących ułatwień dostępu i unikanie ciężkiej pracy.
Etykietka inspekcji
Narzędzie do wybierania elementów ma specjalną funkcję po najechaniu kursorem na stronę, która podaje ogólne informacje o czcionce, kolorze i ułatwieniach dostępu. Na poniższym zrzucie ekranu znajduje się ikona po lewej stronie. Jest to pole ze strzałką
w prawym dolnym rogu. Można ją też wybrać za pomocą klawisza skrótu Control+Shift+C (lub Command+Shift+C w systemie macOS).
Po aktywacji ikona zmieni kolor na niebieski, a przy wskazaniu dowolnego elementu na stronie wyświetli się etykietka szybkiej inspekcji:
Zamiast selektora kolorów, które wymaga znalezienia próbnika kolorów w panelu Style, wystarczy najechać kursorem na stronę, aby zobaczyć wyniki kontrastu. Podobnie jak selektor kolorów, może pokazywać tylko jeden wynik kontrastu naraz.
Spędź dłoń, aż nie zdasz 🎶
Często sprawdzam parowanie kolorów za pomocą tego narzędzia do szybkiej kontroli i okazuje się, że proporcje są zbyt niskie. Zamiast korzystać z funkcji autokorekty w selektorze kolorów (ponieważ jestem wybredny), przesuwam kanały kolorów w CSS i oglądam, aż uda mi się osiągnąć wymagany współczynnik. Określam ten proces „bump til youpass”, ponieważ zmagam się z numerami kanałów kolorów, dopóki nie przejdą kontroli WCAG 2.1.
Poniżej znajdziesz opis tych czynności i musisz je wykonać dokładnie w takiej kolejności:
- W panelu Style ustaw fokus klawiatury wewnątrz koloru.
- Aktywuj narzędzie do sprawdzania elementów za pomocą skrótu klawiszowego
Control+Shift+C(lubCommand+Shift+Cw systemie macOS). - Najedź kursorem na cel.
- Aby zmienić wartość koloru, naciskaj na klawiaturze klawisze w górę/dół.
Jest to możliwe, ponieważ styl CSS nadal jest zaznaczony na klawiaturze, a mysz pozwala wskazać cel. Pamiętaj, aby nie klikać celu, ponieważ zaznaczenie nie spowoduje usunięcia obszaru wartości koloru i nie będzie umożliwiało przesuwania wartości do czasu ponownego zaznaczenia obszaru.
Omówienie usługi porównywania cen
Do tej pory w Narzędziach deweloperskich w Chrome można było sprawdzać tylko jedną parę kolorów naraz, ale na stronie Przegląd usług porównywania cen można zindeksować całą stronę i wyświetlić wszystkie niedostępne pary kolorów:
Więcej informacji o tej funkcji znajdziesz w tym poście CSS: identyfikacja potencjalnych usprawnień w zakresie usług porównywania cen. Możesz też obejrzeć film o Jecelyn Yeen w YouTube z serii „Wskazówki dla deweloperów” na temat potencjalnych ulepszeń CSS za pomocą panelu Przegląd usług porównywania cen.
Latarnia morska
Lighthouse to kolejne narzędzie kontrolne dostępne w Narzędziach deweloperskich w Chrome. Może indeksować Twoją stronę i zgłaszać niedostępne pary kolorów. Zawiera niewielkie zrzuty ekranu każdej pary kolorów, które możesz sprawdzić i ocenić jako zakończoną. Nieprawidłowe kombinacje wpłyną negatywnie na wynik Lighthouse.
Mogą one wyglądać tak:
Konsola JS
Być może wszystkie wymienione dotychczas narzędzia nie są jeszcze dostępne. Może właśnie tam, gdzie jesteś (cały dzień), jest JavaScript. Oto eksperyment, który możesz wypróbować W okienku Problemy podczas tworzenia możesz stale zgłaszać wszelkie problemy związane z kontrastem kolorów. Włącz tę funkcję w sekcji Ustawienia > Eksperymenty, jak pokazano poniżej:
Następnie otwórz panel Issue (Problem) i sprawdź, czy został znaleziony. Jeśli tak, mogą one wyglądać tak:
Emulacja daltonizmu
Skoro mówimy o kontrastach kolorów i zapewnianiu łatwości łączenia kolorów, warto zwrócić uwagę na narzędzie do emulacji barw. Spowoduje to zmianę kolorów i wyglądu projektu, aby zaprezentować efekty daltonizmu, a także zmodyfikować projekt, tak aby nie był to jedyny sposób, w jaki UX komunikuje się z użytkownikiem.
Stosowanie wyłącznie koloru do przedstawiania informacji nie jest bezpieczną praktyką w zakresie ułatwień dostępu, np. czerwony oznacza złe, a zielony szlachetny. Nie wszystkie kolory są takie same, a narzędzie emulacji im to ułatwi.
Emulacja preferencji systemu kontrastu kolorów
Użytkownicy coraz częściej zmieniają ustawienia kontrastu w swoich systemach operacyjnych, dzięki czemu mogą wybrać w interfejsie z wykorzystaniem zmniejszonego lub większego kontrastu. CSS może wykorzystać to ustawienie tak samo jak w przypadku jasnego lub ciemnego motywu. Narzędzia deweloperskie w Chrome pozwalają emulować to ustawienie, dzięki czemu projekty mogą testować i dostosowywać się do żądań użytkownika bez ich przełączania w systemie.
Wypróbuj WCAG 3.0 APCA
Kolejnym eksperymentem, który możesz wypróbować, jest połączenie kolorów z eksperymentalnym systemem punktacji współczynnika kolorów APCA. Po włączeniu opcji Ustawienia > Eksperymenty zastępuje on system proporcji WCAG 2.1 nowszym i ulepszonym algorytmem narzędzia do sprawdzania kontrastu, pozwalając Ci wyświetlić podgląd wyników w miarę, jak oferta pakietowa spełnia standardy.
Po włączeniu użyj etykietki inspekcji punktów lub selektora kolorów, aby wyświetlić wynik parowania kolorów i sprawdzić, czy zostanie zaliczony:
Podsumowanie
Kontrast kolorów to ważny element układanki, który ułatwia korzystanie z internetu, a jego przestrzeganie sprawia, że korzystanie z internetu przez większość osób w najróżniejszych sytuacjach. Mam nadzieję, że te 3 narzędzia pomogą Ci dokonywać doskonałych wyborów kolorów.