Wysoki kontrast i czytelne fonty: dostępność dla osób słabowidzących

Czytelność strony zaczyna się od kontrastu i typografii, nie od efektów wizualnych. Osoba słabowidząca, starszy użytkownik albo ktoś czytający w słońcu na telefonie szybko odpada, jeśli tekst jest jasnoszary, mały i upchany.

Dostępność nie oznacza brzydkiego projektu. Oznacza projekt, który daje oczom odpocząć i pozwala zrozumieć treść bez walki z interfejsem.

Co wpływa na czytelność

• kontrast tekstu względem tła
• rozmiar fontu i wysokość linii
• długość wiersza
• czytelne stany focus i hover
• brak tekstu w obrazach bez alternatywy

Najczęściej psują to subtelne szarości, cienkie fonty i tekst na zdjęciu. Wizualnie wygląda lekko, ale w praktyce bywa nieczytelne.

Jak poprawić stronę

1. Sprawdź kontrast podstawowego tekstu i linków.
2. Zwiększ line-height dla dłuższych akapitów.
3. Ogranicz szerokość kolumny tekstu.
4. Wybierz font z wyraźnymi literami i polskimi znakami.
5. Przetestuj stronę przy zoomie 200%.

Dobrą zasadą jest projektowanie tekstu bloga i stron usługowych jako pierwszej klasy elementu. Jeżeli artykuł jest męczący po 30 sekundach, problemem nie jest użytkownik, tylko skład.

Szybki audyt

• czy link wygląda jak link, a nie wyłącznie jak kolorowy tekst
• czy tekst na przycisku ma dobry kontrast
• czy placeholder nie zastępuje etykiety pola
• czy focus klawiatury jest widoczny
• czy treść da się czytać na mobile bez powiększania

Kontrast i typografia to fundament UX. Dobrze ustawione prawie znikają z uwagi, bo użytkownik po prostu czyta i działa.

Źródła pomocnicze: WCAG: Contrast Minimum, WCAG: Resize Text.