Projektowanie: korzyści wysokiego kontrastu kolorów

Wysoki wskaźnik odrzuceń jest często spowodowany słabą wizualną dostępnością strony. Za mały stopień pisma, nieczytelność, za mało wolnej przestrzeni lub za wiele „rozpraszaczy” sprawiają, że ludzie dosłownie uciekają ze strony.

Jedną z najczęstszych przyczyn wczesnego opuszczania witryny jest słabo dobrany kontrast kolorów, który obniża czytelność zawartości.

Zgodnie ze statystykami Światowej Organizacji Zdrowia (WHO), na świecie żyje około 285 milionów ludzi niedowidzących, z których wielu całkowicie lub częściowo nie rozróżnia kolorów. Ludzie niedowidzący postrzegają kolory inaczej, dlatego jeśli chcesz zaprojektować naprawdę dobra stronę przyjazną dla użytkowników, unikaj kolorów o niskim kontraście. Czym się kierować, aby nie uczynić kontrastu za dużym i zbyt jaskrawym?

Dobra proporcja kolorów

Proporcja kontrastu kolorów jest mierzona dla dwóch barw. Im wyższy jest kontrast, tym łatwiej odróżnić obiekt, obraz czy tekst pierwszego planu od tła.

Kontrast można uzyskać dzięki różnicom barw, jasności czy nasycenia. Obliczyć go można za pomocą formuły stworzonej przez W3C, najważniejszą organizację międzynarodową, która ustala standardy dla Internetu.

Proporcja kontrastu kolorów może przybierać wartość od 1:1 (tło i główna część strony mają taki sam kolor) do 21:1 – to maksymalny kontrast między czernią i bielą.

W3C dokładnie określa wielkości dla kontrastu minimalnego (poziom AA) i maksymalnego (poziom AAA). Poziom AA wymaga co najmniej proporcji 4,5:1 dla tekstu ciągłego. Napis w stylu nagłówka potrzebuje kontrastu 3:1, ponieważ jest wystarczająco czytelny.

Jeśli chcesz zaprojektować stronę na poziomie AAA, strona kolorystyczna projektu będzie wymagała większej uwagi i staranności. Kontrast kolorów w tym wypadku będzie przyjmował wartości 7:1 dla tekstu ciągłego i 4,5:1 dla napisów o dużym stopniu.

Strona może być uznana za przyjazną i dostępną od strony wizualnej, kiedy kontrast kolorów między obiektami a tłem osiąga poziom co najmniej AA. Jeśli tekst jest częścią logo lub znaku firmowego, nie ma minimalnej proporcji, którą musi mieć, aby spełniać założenia W3C.

Korzyści z wysokiego kontrastu kolorów

Jeśli zapewnisz wysoką czytelność, nie tylko umożliwisz korzystanie ze swojej strony ludziom niedowidzącym. Będzie to ułatwienie dla tych, którzy przeglądają twoją stronę na małych ekranach urządzeń mobilnych, w słabym oświetleniu lub na monitorach o niskiej rozdzielczości.

Dowiedziono także, że wyższy kontrast między tekstem a tłem zwiększa szybkość czytania. To oznacza, że czytelnik będzie potrzebował więcej czasu, aby… znudzić się zawartością strony.

Jeśli obawiasz się, że stosowanie wysokich kontrastów kompletnie zaburzy estetykę, zerknij na Contrast Rebellion  – to projekt, który na autentycznych przykładach z Internetu pokazuje, jak twórczo wykorzystać wysokie kontrasty z korzyścią dla wyglądu strony i komfortu odwiedzających.

Aplikacje, którymi sprawdzisz kontrast na stronie

W sieci można znaleźć sporo dobrych darmowych narzędzi, które pomagają projektantom sprawdzić i ustalić wartość kontrastu na ich stronie.
Najłatwiejszy sposób na sprawdzenie kolorów projektu to pobranie ich wartości (np. w programie Photoshop) lub rozszerzenia przeglądarki (ColorPicker dla Mozilli)  i skopiowanie do jednej z wymienionych niżej aplikacji.

Pamiętaj, aby porównywać kolor pierwszego planu – na przykład tekstu – z jego otoczeniem i tłem.

1. WebAim Contrast Checker
   WebAim to organizacja, która promuje ułatwianie dostępu do treści stron internetowych. Oferuje developerom i projektantom szereg narzędzi do ewaluacji strony, w tym także do sprawdzania kontrastu kolorów. ContrastChecker powie ci także, czy w twoim projekcie kontrast koloru spełnia warunki poziomów AA i AAA dla małego i dużego stopnia pisma. Inne narzędzia WebAim dostępne są tu. Najbardziej praktyczny jest Wave, który ocenia dostępność (web accessibility) strony.
2. Snook
   To narzędzie stworzone i udostępniane przez Jonathana Snooka od ponad dekady cieszy się niesłabnącą popularnością. Aplikacja pozwala na zmiany wartości HSL i RGB dla tła i głównego tekstu za pomocą prostych suwaków tak długo, aż kontrast dobranych kolorów będzie spełniał wymogi WCAG.
3. Check My Colours
   Giovanni Scala w swojej aplikacji umożliwia ci przetestowanie wszystkich kolorów tła i pierwszego planu na „żywym” podglądzie strony internetowej.
   Aplikacja oblicza także kontrast jasności i przedstawia pełny raport z wyników. Uważna analiza pomoże ci znacząco poprawić czytelność strony i zrozumieć reguły, które ją zwiększają.
4. Color Scheme Designer
   Nie jest to do końca narzędzie do sprawdzania kontrastu, ale aplikacja dla projektantów, która pomaga skompletować paletę barw.
   Ponadto Color Scheme umożliwia sprawdzenie, jak będą postrzegali kolory ludzie z różnymi zaburzeniami wzroku, które uniemożliwiają widzenie określonych barw.
5. Paletton
   To nowsza wersja Color Scheme Designer. Podobnie jak poprzedniczka pozwala sprawdzić, jak strona będzie widziana przez osoby z zaburzeniami wzroku. Posiada jednak nieco bardziej wyrafinowane opcje, dzięki którym przetestujesz widoczność kolorów na ekranach LED lub CRT niskiej jakości.

Jeśli szukasz innych narzędzi do oceny i sprawdzenia dostępności strony, nad którą pracujesz, listę znajdziesz tu.

Jak stworzyć stronę o przyjaznym kontraście kolorów?

Jeśli stoisz przed wyzwaniem zaprojektowania strony przyjaznej dla użytkowników, którzy zmagają się z zaburzeniami widzenia, przyjmij jedną naczelną zasadę. Nie używaj samego koloru do zaznaczenia ważnych funkcjonalności lub istotnych informacji. Ikonki, które zmieniają kolor w zależności od tego, co użytkownik robi na stronie (kliknięta/nieaktywna) to typowy przykład projektowania, które sprawia trudności osobom nierozróżniającym kolorów.

Jeśli to tylko możliwe, spróbuj projektować dodatkowe „wskazówki”, dzięki którym ludzie inaczej postrzegający barwy będą mogli zrozumieć ich znaczenie i funkcję.

Zwracaj szczególną uwagę na kontrast kolorów w przyciskach, linkach i menu, ponieważ to one są najważniejszymi elementami twojej strony. Jeśli użytkownik nie może sobie szybko z nimi poradzić, równie szybko przejdzie do innej strony. Łatwo rozpoznawalne kolory i kształty przycisków „call to action” również są istotne dla wskaźnika konwersji.

Sprawdzanie kontrastu kolorów to dobry nawyk, który warto sobie wypracować. Dobrze jest także uwzględniać jego wymogi już na początkowym etapie projektowania, ponieważ na bardziej zaawansowanych etapach trudniej będzie przekonać klienta do zmiany raz wybranej palety barw.

Zapisz

Zapisz