Czy kiedykolwiek zdarzyło Ci się mieć problem z czytaniem tekstu na ekranie ze względu na schemat kolorów lub problem z czytaniem w bardzo jasnym lub słabym oświetleniu? A może masz bardziej trwałe problemy z widocznością, np. szacuje się, 300 milionów osób z zaburzeniami rozpoznawania barw lub 253 miliony osób niedowidzących?
Jako projektant lub programista musisz wiedzieć, jak użytkownicy postrzegają kolory i kontrast, czy to tymczasowo, zależnie od sytuacji czy na stałe. Dzięki temu możesz lepiej dostosować się do ich potrzeb związanych z wizualizacją.
W tym module poznasz podstawowe zasady dotyczące kolorów i kontrastu w dostępności.
Percepcja barwy
Czy wiesz, że obiekty nie mają koloru, ale odbijają fale światła? Kiedy widzisz kolor, Twoje oczy odbierają i przetwarzają te fale i przekształcają je w kolory.
W przypadku dostępności cyfrowej mówimy o tych długościach fali w terminach odcienia, nasycenia i jasności (HSL). Model HSL został utworzony jako alternatywa dla modelu kolorów RGB i dokładniej pasuje do tego, jak człowiek postrzega kolory.
Odcień to jakościowy sposób opisania koloru, np. czerwony, zielony lub niebieski, w którym każdy odcień ma swoje miejsce w spektrum kolorów z wartościami od 0 do 360, czerwonym przy 0, zielonym przy 240 i niebieskim.
Nasycenie to intensywność koloru mierzona w procentach od 0% do 100%. Kolor o pełnej nasycenia (100%) będzie bardzo żywy, a kolor bez nasycenia (0%) będzie w szarości lub czarno-biały.
Jasność to jasny lub ciemny znak koloru mierzony w procentach od 0% (czarny) do 100% (biały).
Pomiar kontrastu kolorów
Aby pomóc osobom z różnymi niepełnosprawnościami wzroku, grupa WAI opracowała formułę kontrastu kolorów, która zapewnia wystarczający kontrast między tekstem a tłem. Gdy te współczynniki kontrastu kolorów są przestrzegane, osoby z niewielką wadą wzroku mogą czytać tekst na tle bez potrzeby korzystania z technologii wspomagającej zwiększającej kontrast.
Spójrz na obrazy z żywą paletą kolorów i porównaj, jak wyglądają one dla osób z różnymi rodzajami dyschromatopsji.
Po lewej stronie widać tęczowy piasek w kolorach: fioletowy, czerwony, pomarańczowy, żółty, zielony, jasnoniebieski i ciemnoniebieski. Po prawej stronie znajduje się jaśniejszy, wielokolorowy wzór tęczy.
Deuteranopia
Deuteranopia (powszechnie znana jako „zielona ślepa”) występuje u 1%–5% mężczyzn i od 0,35% do 0,1% kobiet.
Osoby z deuteranopią mają zmniejszoną wrażliwość na zielone światło. Ten filtr symuluje tego typu daltonizm.
Protanopia
Protanopia (powszechnie znana jako ślepota czerwona) występuje u 1,01–1,08% mężczyzn i 0,02% 0,03% kobiet.
Osoby cierpiące na protanopię mają mniejszą wrażliwość na czerwone światło. Ten filtr symuluje, jak wyglądają różne rodzaje dyschromatopsji.
Achromatopsja lub monochromatyzm
Achromatopsja lub monochromatyzm (czyli całkowita ślepota barw) występuje bardzo rzadko.
Osoby z achromatopsją lub monochromatyzmem nie widzą prawie wcale czerwonego, zielonego ani niebieskiego światła. Ten filtr symuluje, jak wyglądają różne rodzaje dyschromatopsji.
Obliczanie kontrastu kolorów
Formuła kontrastu kolorów wykorzystuje względną luminancję kolorów, aby określić kontrast, który może wynosić od 1 do 21. Ta formuła jest często zapisywana w sposób skrócony [color value]:1
. Na przykład czysta czerń na tle czystej bieli ma największy współczynnik kontrastu kolorów, wynoszący 21:1
.
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
Tekst w normalnym rozmiarze, w tym obrazy tekstowe, musi mieć współczynnik kontrastu kolorów 4.5:1
, aby spełniać minimalne wymagania WCAG dotyczące kolorów.
Tekst w dużej wielkości i podstawowe ikony muszą mieć współczynnik kontrastu kolorów 3:1
.
Duży tekst musi mieć co najmniej 18 pkt / 24 piks. lub 14 pkt. / 18,5 piksela pogrubiony. Wymagania dotyczące kontrastu kolorów nie dotyczą logo i elementów dekoracyjnych.
Na szczęście nie trzeba znać zaawansowanej matematyki, ponieważ istnieje wiele narzędzi, które wykonują za nas obliczenia kontrastu kolorów. Narzędzie takie jak Adobe Color, Color Contrast Analyzer, Leonardo i wybór kolorów w Narzędziach deweloperskich w Chrome mogą szybko podać współczynniki kontrastu kolorów i zaproponować sugestie, które pomogą Ci tworzyć najbardziej wszechstronne pary kolorów i palety.
Za pomocą koloru
Bez odpowiedniego kontrastu kolorów słowa, ikony i inne elementy graficzne są trudne do zauważenia, a projekt może szybko stać się niedostępny. Należy jednak zwrócić uwagę na sposób użycia koloru na ekranie, ponieważ nie można używać koloru do przekazywania informacji, wykonywania działań ani rozróżniania elementów wizualnych.
Jeśli na przykład powiesz: „Aby kontynuować, kliknij zielony przycisk”, ale pominiesz dodatkowe treści lub identyfikatory przycisku, osoby z pewnymi rodzajami niedowidzenia kolorów nie będą wiedzieć, który przycisk kliknąć. Podobnie wiele wykresów, tabel i diagramów wykorzystuje tylko kolory do przekazywania informacji. Dodanie innego identyfikatora, takiego jak wzór, tekst lub ikona, jest niezbędne, aby ułatwić użytkownikom zrozumienie treści.
Sprawdzanie produktów cyfrowych w odcieniach szarości to dobry sposób na szybkie wykrywanie potencjalnych problemów z kolorami.
Zapytania o media dotyczące kolorów
Oprócz sprawdzenia współczynników kontrastu kolorów i zastosowania kolorów na ekranie warto rozważyć zastosowanie coraz bardziej popularnych i obsługiwanych zapytań o multimedia, które dają użytkownikom większą kontrolę nad tym, co wyświetla się na ekranie.
Na przykład za pomocą zapytania o multimedia @prefers-color-scheme
możesz utworzyć ciemny motyw, który może być przydatny dla osób z fotofobią lub nadwrażliwością na światło. Możesz też utworzyć motyw o wysokim kontraście za pomocą @prefers-contrast
, który ułatwia korzystanie z aplikacji osobom z niedostatkiem widzenia barw i nadwrażliwością na kontrast.
Preferowany schemat kolorów
Zapytanie o multimedia @prefers-color-scheme
pozwala użytkownikom wybrać jasną lub ciemną wersję witryny lub aplikacji, którą odwiedzają. Aby zobaczyć, jak zmienia się motyw, zmień ustawienia jasnego lub ciemnego motywu i otwórz przeglądarkę, która obsługuje to zapytanie o multimedia. Zapoznaj się z instrukcjami dotyczącymi trybu ciemnego na komputerach Mac i Windows.
Preferuje kontrast
Zapytanie o media @prefers-contrast
sprawdza ustawienia systemu operacyjnego użytkownika, aby sprawdzić, czy tryb wysokiego kontrastu jest włączony lub wyłączony. Aby zobaczyć, jak działa zmiana motywu, zmień ustawienia kontrastu i otwórz przeglądarkę, która obsługuje to zapytanie o media (ustawienia trybu kontrastowego w systemie Mac i systemie Windows).
Zapytania o multimedia w warstwach
Aby zapewnić użytkownikom jeszcze więcej opcji, możesz użyć wielu zapytań dotyczących mediów zorientowanych na kolor. W tym przykładzie użyliśmy razem @prefers-color-scheme
i @prefers-contrast
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o kolorach i kontraście
Sam kolor nie jest wystarczającym identyfikatorem dokumentu. Co jeszcze pomoże czytelnikom zidentyfikować elementy interfejsu?