Często projektanci dzielą projekty na dostępne oraz ładne. Projekty dostępne są zaprojektowane dla wszystkich użytkowników, w tym również dla osób słabo widzących. Natomiast projekty ładne niekoniecznie będą dostępne.
W określeniu dostępności może Ci pomóc wytyczna na temat kontrastu, która mówi, że zwykły tekst czyli do 18 pikseli miał stosunek kontrastu co najmniej 4,5 : 1. Przy większym tekście np. nagłówkach współczynnik ten powinien wynosić co najmniej 3:1. https://marijohannessen.github.io/color-contrast-checker/
Jeśli mamy ciemny tekst na białym tle to zachowanie tych proporcji jest dosyć łatwe.
Cała zabawa zaczyna się gdy w grę wchodzi kolor.
Przy projektowani dostępnych elementów bierzesz pod uwagę wszystkich użytkowników, również tych, którzy bardzo słabo widzą. Często takie elementy muszą być bardziej wyraziste i kontrastowe. Czy przekłada się to na ich estetykę? Niestety bardzo często tak.
Zobacz na ten projekt stworzony z myślą o utrzymaniu dostępności i zachowaniu wysokiego kontrastu. Niestety nie wygląda to zbyt atrakcyjnie, ale za to posiada dobry kontrast.
Teraz popatrz na formularz, który stworzony został biorąc na pierwszy plan estetykę. Jak widzisz kontrast nie został tutaj zachowany ale wizualnie projekt jest o wiele ładniejszy.
Zatem czy jesteś skazany na wybór między ładnym projektem ale niedostępnym dla wszystkich czy też dostępnym dla wszystkich ale mniej atrakcyjnym? Niekoniecznie. Po prostu musisz zachować równowagę. Czasem mała zmiana może poprawić kontrast.
Zobacz teraz na wszystkie te projekty zaprojektowane w pierwszym przypadku z naciskiem na dostępność, w drugim na estetykę, a w trzecim na kompromis.
Gdy używasz białego tekstu na kolorowym tle, bardzo często nie będziesz mieścił się w normach kontrastu. Nawet jeśli Ci się wydaje, że całość jest dobrze widoczna, narzędzie oceni kontrast negatywnie.
Dopiero gdy zmienisz tekst na ciemny to kontrast będzie odpowiedni. Jednak w tym wypadku ucierpiała estetyka ponieważ ciemny tekst na kolorowym tle nie wygląda zbyt przyjemnie.
Jak zatem wybrnąć z tej sytuacji?
Możesz przyciemnić tło elementów, przez co biały tekst będzie bardziej kontrastowy. Jednak przyciemniające tło sprawisz że elementy będą bardzo widoczne i będą przyciągać uwagę, a nie do końca o to chodzi.
Lepszym rozwiązaniem jest odwrócenie kontrastu. Zamiast używać jasnego tekstu na ciemnym tle, spróbuj zastosować ciemny tekst na jasnym tle.
Jak widzisz kolor został zachowany ale jednocześnie nie przyciąga tak uwagi jak poprzednie i nie odwraca uwagi od innych, ważniejszych elementów.
Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.
