Kolor i kontrast

Czy zdarzyło Ci się kiedyś, że czytałeś tekst na ekranie i był on trudny do odczytania ze względu na schemat kolorów lub gdy miał on problem z patrzeniem na ekran w bardzo jasnym lub słabym oświetleniu? A może masz trwały problem ze wzrokiem, np. 300 milionów osób cierpiących na daltonizm lub 253 mln osób niedowidzących?

Jako projektant lub programista musisz wiedzieć, jak ludzie postrzegają kolor i kontrast, niezależnie od tego, czy jest to chwilowe, sytuacyjne czy trwałe. Pomoże Ci to zaspokoić potrzeby wizualne.

W tym module poznasz podstawowe zasady dotyczące kolorów i kontrastu.

Rozpoznawanie koloru

Czy wiesz, że obiekty nie mają kolorów, ale odbijają fale światła? Kiedy widzisz barwa, Twoje oczy odbierają i przetwarzają te długości fal i przekształcają je w kolory.

W przypadku dostępności cyfrowej fale te mierzymy w postaci barwy, nasycenia i jasności (HSL). Model HSL powstał jako alternatywa dla modelu kolorów RGB, który jest bardziej zbliżony do tego, jak człowiek postrzega kolor.

Barwa to jakościowy sposób opisania koloru, np. czerwonego, zielonego lub niebieskiego, gdzie każdy odcień ma określone miejsce w spektrum kolorów o wartościach z zakresu od 0 do 360, gdzie czerwony wynosi 0, zielony – 120 i niebieski – 240.

Nasycenie to intensywność koloru mierzona w procentach od 0% do 100%. Kolor z pełnym nasyceniem (100%) jest bardzo żywy, a kolor bez nasycenia (0%) to tryb szarości lub czarno-biały.

Jasność to jasna lub ciemna postać koloru mierzona w procentach od 0% (czarny) do 100% (biały).

Mierzenie kontrastu kolorów

Aby pomóc osobom z różnymi niepełnosprawnościami wzroku, grupa WAI stworzyła formułę kontrastu kolorów, aby zapewnić odpowiedni kontrast między tekstem a jego tłem. Dzięki zastosowaniu tych współczynników kontrastu kolorów osoby słabowidzące mogą czytać tekst w tle, nie korzystając z technologii wspomagającej kontrast.

Przyjrzyjmy się obrazom z żywą paletą kolorów i porównajmy, jak wyglądałyby one w przypadku osób z daltonizmem.

Po lewej stronie widać tęczowy piasek w kolorach fioletowym, czerwonym, pomarańczowym, żółtym, turkusowym, jasnoniebieskim i ciemnoniebieskim. Po prawej znajduje się jaśniejszy, wielokolorowy wzór tęczy.

Deuteranopia

Deuteranopia (powszechnie znana jako osoba niewidoma zielonego) występuje u 1%–5% mężczyzn, a od 0,35% do 0,1% kobiet.

Osoby cierpiące na deuteranopię mają zmniejszoną wrażliwość na zielone światło. Ten filtr symuluje daltonizm,

Protanopia

Protanopia (powszechnie znana jako osoba niewidoma czerwonego) występuje u 1,01–1,08% mężczyzn i 0,02% z 0,03% kobiet.

Osoby z protanopią mają zmniejszoną wrażliwość na czerwone światło. Ten filtr symuluje daltonizm,

Achromatopsja lub monochromatyzm

Achromatopsja lub monochromatyzm (lub całkowita ślepota barw) występuje bardzo, bardzo rzadko.

Osoby z achromatopsją lub monochromatyzmem prawie nie odbierają światła czerwonego, zielonego ani niebieskiego. Ten filtr symuluje osoby z daltonizmem,

Oblicz kontrast kolorów

Formuła kontrastu kolorów wykorzystuje względną luminancję kolorów do określenia kontrastu, który mieści się w zakresie od 1 do 21. Ta formuła jest często skracana do [color value]:1. Na przykład czysta czerń i biel mają największy współczynnik kontrastu kolorów: 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 o normalnym rozmiarze, w tym obrazy tekstu, musi mieć współczynnik kontrastu kolorów 4.5:1, by spełnić minimalne wymagania WCAG dotyczące koloru. Duży tekst i ważne ikony muszą mieć współczynnik kontrastu kolorów 3:1. Duży tekst ma rozmiar co najmniej 18 punktów / 24 piksele lub 14 punktów / 18,5 pikseli pogrubiony. Wymagania dotyczące kontrastu kolorów nie dotyczą logo ani elementów dekoracyjnych.

Na szczęście nie musisz przeprowadzać zaawansowanych obliczeń matematycznych, ponieważ istnieje wiele narzędzi, które wykonają za Ciebie obliczenia kontrastu kolorów. Narzędzia takie jak Adobe Color, Analizator kontrastu kolorów, Leonardo i selektor kolorów w Chrome DevTools mogą szybko określić współczynniki kontrastu kolorów i zaproponować sugestie, które pomogą utworzyć najbardziej uniwersalne pary i palety.

Używanie koloru

Przy braku odpowiedniego poziomu kontrastu kolorów trudno znaleźć słowa, ikony i inne elementy graficzne, a projekt może szybko stać się niedostępny. Ważne jest jednak, aby zwrócić uwagę na sposób użycia koloru na ekranie, ponieważ sam kolor nie jest używany do przekazywania informacji, działań ani do wyróżnienia elementu wizualnego.

Jeśli na przykład powiesz „kliknij zielony przycisk, by kontynuować”, ale pomiń wszelkie dodatkowe treści lub identyfikatory w przycisku, osobom z daltonizmem nie będzie wiadomo, który przycisk kliknąć. Wiele wykresów, tabel i tabel przekazuje informacje tylko za pomocą kolorów. Dodanie kolejnego identyfikatora, np. wzoru, tekstu lub ikony, ma kluczowe znaczenie, ponieważ pomaga użytkownikom zrozumieć treść.

Sprawdzanie produktów cyfrowych w skali szarości to dobry sposób na szybkie wykrycie potencjalnych problemów z kolorami.

Zapytania o multimedia oparte na kolorach

Oprócz sprawdzania współczynnika kontrastu kolorów i używania 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 jest wyświetlane na ekranie.

Na przykład przy użyciu zapytania o media @prefers-color-scheme możesz utworzyć ciemny motyw, co może być przydatne dla osób z fotofobią lub nadwrażliwością na światło. Możesz też utworzyć motyw o wysokim kontraście za pomocą narzędzia @prefers-contrast, które będzie przeznaczone dla osób mających problemy z brakiem kolorów i czułości kontrastu.

Preferuje schemat kolorów

Zapytanie o multimedia @prefers-color-scheme pozwala użytkownikom wybrać jasną lub ciemną wersję odwiedzanej witryny lub aplikacji. Aby zobaczyć, jak ten motyw wygląda w praktyce, zmień ustawienia preferencji jasnego i ciemnego i przejdź do przeglądarki, która obsługuje to zapytanie o multimedia. Zapoznaj się z instrukcjami dotyczącymi trybu ciemnego na komputerach z systemem macOS i Windows.

Preferuje kontrast

Zapytanie o media @prefers-contrast sprawdza ustawienia systemu operacyjnego użytkownika, aby sprawdzić, czy wysoki kontrast jest włączony czy wyłączony. Aby zobaczyć, jak wygląda zmiana motywu, zmień ustawienia ustawień kontrastu i przejdź do przeglądarki, która obsługuje to zapytanie o multimedia (ustawienia trybu kontrastu Mac i Windows).

Układanie zapytań o multimedia

Aby dać użytkownikom jeszcze większy wybór, możesz używać wielu zapytań o multimedia skoncentrowanych na kolorach. W tym przykładzie użyliśmy elementów @prefers-color-scheme i @prefers-contrast.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat kolorów i kontrastu