Kolor i kontrast

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.

Porównaj tryb jasny i ciemny.

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).

Porównaj zwykłe i wysoki kontrast.

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.

Porównaj kolory i kontrast.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kolorach i kontraście