Lekcja z cyklu samodzielnego przeprowadzania testów na stronie.
Na stronach często przewijają się podobne błędy. Jednym z nich jest kontrast kolorów, który ma ogromny wpływ na dostępność. Problem ten dotyczy zwłaszcza osób z rożnymi wadami wzroku.
Według statystyki może to być nawet 20% Twoich użytkowników. Musisz wiedzieć, że problemy ze wzrokiem to nie tylko krótkowzroczność lecz również takie wady jak daltonizm, jaskra, zaćma, protanopia.
Zbyt niski kontrast, zwłaszcza w przypadku koloru, sprawia, że elementy stają się nieczytelne. Osoby ze słabym wzrokiem często nie rozumieją takich elementów.
➡️ Jak przetestować stronę pod kątem kontrastu?
Jeśli chcesz wiedzieć jak widzą Twoją stronę z różnymi wadami wzroku uruchom ten test: lowvision.support lub tutaj toptal.com/designers/colorfilter
A tutaj jeszcze jedno narzędzie whocanuse.com, które przetestuje kontrast kolorów biorąc pod uwagę różne wady wzroku.
⭐ Mały tip: Możesz też za pomocą Photoshopa przetestować projekt na ślepotę barw:
- Przekonwertuj dokument na tryb kolorów RGB
- Wybierz polecenie Widok > Ustawienia próbne > Ślepota kolorów
Możesz też w Photoshopie przekonwertować projekt na skalę szarości, a następnie lekko rozmyć za pomocą rozmycia Gaussowskiego. To pokaże Ci, które elementy są najbardziej kontrastowe.
➡️ Jak przystosować stronę dla osób z wadą wzroku?
- Po prostu postępuj zgodnie z wytycznymi WCAG.
Zastosuj takie narzędzie jak usecontrast.com oraz wave.webaim.org, by przetestować kontrast na stronie. - Zredukuj paletę kolorów – niektóre kolory nie spełniają standardów WCAG. Jeśli jakiś kolor nie spełnia wytycznych dotyczących kontrastu kolorów, dlaczego znajduje się w Twojej palecie? Załóżmy, że masz gdzieś szary tekst, który nie spełnia wymagań. Oznacza to, że niektórzy ludzie tego nie zobaczą, więc w teorii jest on niepotrzebny.
- Nie polegaj tylko na kolorze – dodaj inne wskazówki wizualne jak ikony czy oznaczenia np. do komunikatów, wykresów, tabel.
