Kolory Twojej marki wywierają silny wpływ emocjonalny, ale jak postrzegają je osoby niedowidzące, daltonistyczne lub borykające się z czynnikami środowiskowymi utrudniającymi widoczność?
Poziomy kolorów i kontrastu mają kluczowe znaczenie dla komunikacji, a odpowiednie uzyskanie tych szczegółów ma kluczowe znaczenie dla projektanta dbającego o dostępność.
Zaburzenia postrzegania kolorów są częstsze, niż mogłoby się wydawać. Dlatego w tym poście porozmawiamy o tym, jak osoby niepełnosprawne, takie jak słabowidzący, dysleksja i daltonista, wchodzą w interakcję z siecią.
Spis treści
Jak wykorzystać moduł sprawdzania kolorów, aby poprawić dostępność mojej witryny internetowej?
Ta sekcja jest właściwie dość prosta, chociaż wymaga pewnego wysiłku. Będziesz musiał skorzystać z internetowego narzędzia sprawdzania kontrastu WebAIM. WebAIM to organizacja non-profit z siedzibą na Uniwersytecie Stanowym Utah, której misją jest zwiększanie dostępności sieci na całym świecie.
Po prostu wprowadź kolor pierwszego planu (np. kolor tekstu lub ikon) i kolor tła jako wartości szesnastkowe (znane również jako wartości szesnastkowe), jak określono w HTML lub CSS, a moduł sprawdzania współczynnika kontrastu poinformuje Cię, czy współczynnik jest wystarczający. Pamiętaj, że minimalny współczynnik kontrastu, jakiego powinieneś szukać, to 4.5 do 1. Czarny tekst na białym tle ma współczynnik kontrastu 21 do 1, więc masz dużą swobodę.
5 narzędzi do tworzenia internetowej palety kolorów widocznej dla każdego
1. Kontroler kontrastu kolorów WebAIM
Wprowadź kolory szesnastkowe pierwszego planu i tła. Dane wyjściowe pokazują zgodność z normami AA i AAA w przypadku zwykłego i dużego tekstu, wraz z przykładowym zdaniem. Suwaki pozwalają zmieniać elementy, dopóki nie znajdziesz dobrej kombinacji.
Silne strony
- Proste narzędzie z przyjaznym dla oczu interfejsem.
- To ładne, proste narzędzie dla początkujących, i nie tylko projektantów.
Słabości
- Nie można porównać więcej niż dwóch kolorów, tylko dwa.
- Suwak jasności nie jest zbyt dobrym sposobem na dobór kolorów. Trudno powiedzieć, jak atrakcyjne kolory są na tym prostym wyświetlaczu.
2. Kontroler kontrastu dla WCAG
Wprowadź kolory szesnastkowe pierwszego planu i tła. Pokazuje zgodność AA i AAA dla normalnego i dużego tekstu obok próbki tekstu Lorem Ipsum. Możesz także przesłać zdjęcie. Automatycznie wybierana jest dla Ciebie paleta 9 kolorów. Następnie możesz porównać każdy kolor jako kolor pierwszego planu lub kolor tła.
Silne strony
- Proste narzędzie z przyjaznym interfejsem.
- Posiadanie możliwości tworzenia palet z obrazów.
Słabości
- Paleta jest wybierana automatycznie i możesz ją dalej zmieniać za pomocą próbnika kolorów, ale zmiany te nie zostaną zapisane z powrotem w palecie. Należy skopiować i wkleić informacje do nowego dokumentu.
3. Kostka koloru
Wprowadź kolory palety, każdy w osobnej linii. Wynik pokazuje przykładowe litery ze współczynnikami kontrastu w porównaniu ze standardami AA dla małych i dużych czcionek. Trzy kolumny pokazują kontrast z białym tłem, czarnym tłem i zestawem kolorów marki, które są „najbardziej czytelne z dostępnych”.
Silne strony
- Przyjazny dla oczu Interfejs użytkownika (UI) jest dobrze zorganizowany, a status Pass/Fail/Edge jest łatwy do sprawdzenia.
Słabości
- Nie spełnia standardów określonych przez AAA.
- Nie wykonuje wszystkich możliwych kombinacji kolorów i na początku nie jest jasne, czy tak jest.
4.) Siatka kontrastowa z ośmioma kształtami
Wprowadź kolory palety. Możesz także nadać każdemu kolorowi nazwę. Aplikacja tworzy stół z każdą możliwą kombinacją kolorów. Dostępne są trzy rozmiary płytek. Istnieją wizualne wskazówki dotyczące wyniku pomyślnego/niepomyślnego/krawędzi AA i AAA oraz efektywnego współczynnika kontrastu. Kolumny i wiersze można przesuwać w aplikacji metodą przeciągania i upuszczania. Dane tabelaryczne można zapisywać, eksportować i udostępniać.
Silne strony
- Istnieje wiele przydatnych funkcji, które pomagają w analizie całych palet.
Słabości
- Trudniej się go nauczyć niż innych narzędzi, które są łatwiejsze w użyciu.
- Niewłaściwy sposób porównywania tylko dwóch kolorów.
- Nie nadaje się do zastanawiania się, jak kolory ze sobą współgrają.
- Trochę przytłaczające, ale jest tam pokazanych wiele informacji.
5. Bezpieczny kolor
Wpisz kolor tła. Wybierz rodzinę, rozmiar i wagę czcionki. Standardowo wybierz AA lub AAA. Pokazuje wybrany kolor i jego kod szesnastkowy, a także próbkę i efektywny współczynnik kontrastu. Najlepsze są duże miniatury możliwych kolorów pierwszego planu z wystarczającym kontrastem. Możesz obejrzeć wszystkie lub tylko wybrane grupy kolorów (zielony, niebieski, fioletowy itp.)
Silne strony
- Dzięki przyjaznemu dla oczu interfejsowi łatwo jest znaleźć kombinację kolorów, która wygląda dobrze i działa dobrze.
- Jest to przydatne narzędzie, jeśli nie masz jeszcze palety kolorów marki lub chcesz dodać ją do już posiadanej w Internecie.
Słabości
- Jednocześnie można porównywać tylko kolory pierwszego planu i tła.
- Jeśli chcesz je zapisać, musisz skopiować i wkleić kolory do osobnego dokumentu.
- Wyjdź i zrób coś dla wszystkich!
Gdy już wiesz, jak korzystać z tych narzędzi, może się okazać, że do projektu będziesz potrzebować więcej niż jednego. Być może Color Cube to najlepszy sposób, aby pokazać klientowi, czego dowiedziałeś się o dostępności. Być może będziesz przez cały czas używać narzędzia WebAIM do wykonywania szybkich kontroli.
Wnioski
Korzystając ze wskazówek, wytycznych i narzędzi, o których właśnie rozmawialiśmy, możesz nadać swojej witrynie kolory i etykiety o wysokim kontraście. Ułatwi to osobom z wadą wzroku, dysleksją i daltonizmem czytanie Twojej witryny i treści. Nie zdziw się, jeśli Twoim ogólnym odbiorcom również łatwiej będzie korzystać z Twojej witryny.
