Kolor i kontrast

Czy zdarzyło Ci się kiedyś czytać tekst na ekranie i mieć trudności z powodu schematu kolorów lub słabej widoczności ekranu w bardzo jasnym lub słabo oświetlonym otoczeniu? A może masz trwałe problemy z widzeniem kolorów, tak jak szacunkowo 300 milionów osób z daltonizmem lub 253 miliony osób niedowidzących?

Jako projektant lub programista musisz wiedzieć, jak ludzie postrzegają kolory i kontrast – tymczasowo, w określonych sytuacjach lub na stałe. Pomoże Ci to jak najlepiej zaspokoić ich potrzeby wizualne.

W tej części przedstawimy podstawowe informacje o kolorach i kontraście z punktu widzenia ułatwień dostępu.

Postrzeganie kolorów

Czy wiesz, że obiekty nie mają koloru, ale odbijają fale świetlne? Gdy widzisz kolor, Twoje oczy odbierają i przetwarzają te fale, a następnie przekształcają je w kolory.

W kontekście ułatwień dostępu mówimy o tych falach w kategoriach barwy, nasycenia i jasności (HSL). Model HSL został stworzony jako alternatywa dla modelu kolorów RGB i lepiej odzwierciedla sposób, w jaki człowiek postrzega kolory.

Barwa to jakościowy sposób opisywania koloru, np. czerwony, zielony lub niebieski. Każda barwa ma określone miejsce w spektrum kolorów z wartościami od 0 do 360, gdzie czerwony to 0, zielony to 120, a niebieski to 240.

Nasycenie to intensywność koloru mierzona w procentach od 0% do 100%. Kolor o pełnym nasyceniu (100%) będzie bardzo żywy, a kolor bez nasycenia (0%) będzie w skali szarości lub czarno-biały.

Jasność to jasny lub ciemny charakter koloru mierzony w procentach od 0% (czarny) do 100% (biały).

Mierzenie kontrastu kolorów

Aby ułatwić korzystanie z treści 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 jego tłem. Jeśli te współczynniki kontrastu kolorów są przestrzegane, osoby z umiarkowanie słabym wzrokiem mogą czytać tekst na tle bez konieczności korzystania z technologii wspomagającej osoby z niepełnosprawnością zwiększających kontrast.

Przyjrzyj się obrazom z żywą paletą kolorów i porównaj, jak obraz będzie wyglądał dla osób z określonymi rodzajami daltonizmu.

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

Deuteranopia

Deuteranopia (powszechnie znana jako ślepota na kolor zielony) występuje u 1–5% mężczyzn i 0,35–0,1% kobiet.

Osoby z deuteranopią mają zmniejszoną wrażliwość na zielone światło. Ten filtr daltonizmu symuluje, jak może wyglądać ten rodzaj daltonizmu.

Protanopia

Protanopia (powszechnie znana jako ślepota na kolor czerwony) występuje u 1,01–1,08% mężczyzn i 0,02–0,03% kobiet.

Osoby z protanopią mają zmniejszoną wrażliwość na czerwone światło. Ten filtr daltonizmu symuluje, jak może wyglądać ten rodzaj daltonizmu.

Achromatopsja lub monochromatyzm

Achromatopsja lub monochromatyzm (czyli całkowita ślepota na kolory) występuje bardzo rzadko.

Osoby z achromatopsją lub monochromatyzmem prawie nie postrzegają czerwonego, zielonego ani niebieskiego światła. Ten filtr daltonizmu symuluje, jak może wyglądać ten rodzaj daltonizmu.

Obliczanie kontrastu kolorów

Formuła kontrastu kolorów wykorzystuje względną luminancję kolorów do określenia kontrastu, który może wynosić od 1 do 21. Ta formuła jest często skracana do [color value]:1. Na przykład czysta czerń na czystej bieli ma największy współczynnik kontrastu kolorów, czyli 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 standardowym rozmiarze, w tym obrazy tekstu, musi mieć współczynnik kontrastu kolorów wynoszący 4.5:1, aby spełniać minimalne wymagania WCAG dotyczące kolorów. Tekst o dużym rozmiarze i najważniejsze ikony muszą mieć współczynnik kontrastu kolorów 3:1. Tekst o dużym rozmiarze ma co najmniej 18 punktów / 24 piksele lub 14 punktów / 18,5 piksela w przypadku pogrubienia. Logo i elementy dekoracyjne są zwolnione z tych wymagań dotyczących kontrastu kolorów.

Na szczęście nie trzeba wykonywać zaawansowanych obliczeń matematycznych, ponieważ istnieje wiele narzędzi, które obliczą kontrast kolorów za Ciebie. Narzędzia takie jak Adobe Color, Color Contrast Analyzer, Leonardo i selektor kolorów w Narzędziach deweloperskich w Chrome mogą szybko podać współczynniki kontrastu kolorów i zaproponować rozwiązania, które pomogą utworzyć najbardziej inkluzywne pary kolorów i palety.

Używanie kolorów

Jeśli nie ma odpowiedniego kontrastu kolorów, trudno jest znaleźć słowa, ikony i inne elementy graficzne elementy są trudne do odkrycia, a projekt może szybko stać się niedostępny. Ważne jest jednak również, aby zwracać uwagę na to, jak kolor jest używany na ekranie, ponieważ nie można używać samego koloru do przekazywania informacji, działań ani do odróżniania elementu wizualnego.

Jeśli na przykład powiesz „kliknij zielony przycisk, aby kontynuować”, ale pominiesz dodatkowe treści lub identyfikatory przycisku, osobom z niektórymi rodzajami daltonizmu trudno będzie określić, który przycisk kliknąć. Podobnie wiele wykresów i tabel używa samego koloru do przekazywania informacji. Dodanie innego identyfikatora, takiego jak wzór, tekst lub ikona, jest niezbędne, aby pomóc 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 dotyczące kolorów

Oprócz sprawdzania współczynników kontrastu kolorów i użycia kolorów na ekranie, warto rozważyć zastosowanie coraz popularniejszych 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 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 światłowstrętem. Możesz też utworzyć motyw o wysokim kontraście za pomocą @prefers-contrast, który jest przydatny dla osób z zaburzeniami widzenia kolorów i wrażliwością na kontrast.

Preferowany schemat kolorów

Zapytanie o multimedia @prefers-color-scheme umożliwia użytkownikom wybranie jasnej lub ciemnej wersji witryny lub aplikacji, którą odwiedzają. Aby zobaczyć, jak działa zmiana motywu, zmień ustawienia preferencji jasnego lub ciemnego motywu i otwórz przeglądarkę, która obsługuje to zapytanie o multimedia. Sprawdź instrukcje dotyczące trybu ciemnego w systemach Mac i Windows.

Porównaj tryb jasny i ciemny.

Preferowany kontrast

Zapytanie o multimedia @prefers-contrast sprawdza ustawienia systemu operacyjnego użytkownika, aby sprawdzić, czy włączony jest tryb wysokiego kontrastu czy nie. Aby zobaczyć, jak działa zmiana motywu, zmień ustawienia preferencji kontrastu i otwórz przeglądarkę, która obsługuje to zapytanie o multimedia (Mac i Windows ustawienia trybu kontrastu).

Porównaj tryb zwykły i tryb wysokiego kontrastu.

Zapytania o multimedia dotyczące warstw

Aby dać użytkownikom jeszcze więcej możliwości wyboru, możesz użyć kilku zapytań o multimedia dotyczących kolorów. W tym przykładzie połączyliśmy zapytania @prefers-color-scheme i @prefers-contrast.

Porównaj kolor i kontrast.