Kategoria:

Kontrast, czcionka, odstępy — jak projektować czytelne strony

Mężczyzna pracujący na laptopie. W tle widoczne miasto nocą oraz graficzne elementy: teczka, koła zębate, litery.

Czytelność strony to jeden z najprostszych sposobów na poprawę jej dostępności – i jeden z najczęściej zaniedbywanych. Kilka podstawowych zasad potrafi zdecydowanie ułatwić odbiór treści osobom słabowidzącym, ale też każdemu, kto czyta ekran w słońcu albo na małym telefonie.

Kontrast kolorystyczny

WCAG na poziomie AA wymaga kontrastu co najmniej 4,5:1 między tekstem a tłem dla zwykłego tekstu oraz 3:1 dla tekstu dużego (od 18 pt lub 14 pt pogrubionego) i elementów interfejsu, takich jak obramowania przycisków. W praktyce oznacza to, że jasnoszary tekst na białym tle – mimo że wygląda „elegancko” – często nie spełnia normy. Kontrast łatwo sprawdzić darmowymi narzędziami typu WebAIM Contrast Checker.

Nie tylko kolor

Informacja przekazywana wyłącznie kolorem (np. „pola wymagane zaznaczono na czerwono”) jest niedostępna dla osób z zaburzeniami rozpoznawania barw. Dobrą praktyką jest dodanie dodatkowego oznaczenia – ikony, tekstu, gwiazdki – obok koloru.

Typografia

  • Rozmiar tekstu podstawowego definiuj w jednostkach względnych (rem), a nie sztywnych pikselach – dzięki temu użytkownik może swobodnie powiększyć tekst w przeglądarce,
  • Unikaj tekstu wyjustowanego do obu krawędzi – nierówne odstępy między słowami utrudniają czytanie osobom z dysleksją,
  • Zachowaj odpowiednią interlinię (zalecane co najmniej 1,5 wysokości tekstu) i odstępy między akapitami,
  • Nie skracaj długości linii tekstu nadmiernie, ale też nie pozwalaj, by ciągnęła się przez cały szeroki ekran – optymalnie to 60-80 znaków w wierszu.

Testuj powiększenie

Dobra praktyka to sprawdzenie strony przy powiększeniu do 200% w przeglądarce – zgodnie z WCAG treść i funkcjonalność powinny pozostać w pełni dostępne, bez utraty informacji czy konieczności przewijania w dwóch kierunkach jednocześnie.

Wróć do wszystkich wpisów