Napraw ten częsty błąd UX – kontrast

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:

  1. Przekonwertuj dokument na tryb kolorów RGB
  2. 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?

  1. Po prostu postępuj zgodnie z wytycznymi WCAG.
    Zastosuj takie narzędzie jak usecontrast.com oraz wave.webaim.org, by przetestować kontrast na stronie.
  2. 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.
  3. Nie polegaj tylko na kolorze – dodaj inne wskazówki wizualne jak ikony czy oznaczenia np. do komunikatów, wykresów, tabel.

Moje produkty ux/ui dla projektantów

Podobne wpisy:

Menu