UX / UI Wysoki wpływ Łatwe 20–40 min

Kontrast tekstu względem tła

Tekst musi mieć wystarczający kontrast (WCAG AA 4,5:1).

Co to jest

Kontrast to różnica jasności między tekstem a tłem. Jasnoszary tekst na białym tle ma niski kontrast i źle się czyta. WCAG AA wymaga proporcji co najmniej 4,5:1 dla zwykłego tekstu.

Dlaczego warto to rozwiązać

Niski kontrast wyklucza użytkowników ze słabszym wzrokiem i pogarsza czytelność dla wszystkich, zwłaszcza na telefonie w słońcu. To częsty brak dostępności i Google zgłasza go w audytach.

Jak to zrobić

1Sprawdź proporcję kontrastu (narzędzie w przeglądarce lub internetowy contrast checker).
2Dla zwykłego tekstu celuj w ≥ 4,5:1, dla dużego tekstu ≥ 3:1.
3Unikaj jasnoszarego tekstu (#ccc, #ddd) na białym tle.
4Nie przytłumiaj tekstu zbyt niską przezroczystością (opacity).

Przykład

Źle

.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — nieczytelne */

Dobrze

.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Podsumowanie

Wystarczający kontrast to podstawa czytelności i dostępności. Nasza statyczna heurystyka zwróci uwagę na ewidentnie jasne kolory, ale dokładną proporcję sprawdź w przeglądarce. Ciemniejszy tekst na jasnym tle (i odwrotnie) to bezpieczny wybór.

Powiązane tematy