Kontrast i kolory dla słabowidzących: praktyczne zasady dostępnego UI

Kontrast i kolory na stronie muszą działać nie tylko na dużym monitorze projektanta, ale też na telefonie, w słońcu, przy słabszym wzroku i przy zmęczeniu użytkownika. Dostępny UI nie oznacza brzydkiego UI. Oznacza taki dobór barw, stanów i typografii, który nie zmusza ludzi do zgadywania.

Najczęstszy błąd to ocenianie koloru „na oko”. Projekt może wyglądać elegancko, a jednocześnie mieć zbyt jasny tekst, niewidoczne linki, słaby focus albo komunikaty błędów oparte wyłącznie na czerwonym kolorze.

Podstawowe zasady kontrastu

Element	Praktyczna zasada	Co sprawdzić?
Tekst akapitowy	Powinien mieć wyraźny kontrast względem tła.	Czy da się czytać na mobile bez powiększania?
Duże nagłówki	Mogą mieć nieco niższy kontrast niż mały tekst, ale nadal muszą być czytelne.	Czy cienki font nie znika na jasnym tle?
Linki	Nie powinny różnić się wyłącznie subtelnym kolorem.	Czy link w treści da się rozpoznać bez najechania?
Przyciski	Tekst, tło i stan hover/focus muszą być czytelne.	Czy CTA nie wygląda jak dekoracyjny prostokąt?
Błędy formularza	Kolor plus tekst lub ikona, nie sam czerwony.	Czy osoba nierozróżniająca barw zrozumie problem?

Kolor nie może być jedynym nośnikiem informacji

Jeżeli formularz pokazuje błąd tylko przez czerwone obramowanie pola, część użytkowników go nie zauważy. Dodaj tekst, ikonę, opis przy polu i logiczne powiązanie z komunikatem. To pomaga osobom słabowidzącym, daltonistom i użytkownikom czytników ekranowych.

Jak testować kontrast w praktyce?

1. Sprawdź główne kombinacje kolorów w narzędziu do kontrastu, np. WebAIM Contrast Checker.
2. Przejdź stronę na mobile, nie tylko na desktopie.
3. Włącz tryb wysokiego kontrastu lub symulację zaburzeń widzenia kolorów.
4. Sprawdź hover, active, disabled i focus, nie tylko stan domyślny.
5. Przetestuj formularz z błędem i sukcesem.
6. Zobacz stronę przy jasności ekranu ustawionej niżej niż zwykle.

Najczęstsze problemy na stronach firmowych

• Jasnoszary tekst na białym tle, szczególnie w opisach kart i stopce.
• Przycisk z niskim kontrastem, bo kolor marki jest zbyt delikatny.
• Linki wyglądające jak zwykły tekst.
• Focus outline usunięty w CSS.
• Komunikaty błędów oparte tylko na kolorze.
• Tekst na zdjęciu bez ciemnej nakładki lub jasnego panelu.
• Ikony bez etykiety tekstowej w ważnych akcjach.

Kolory marki a dostępność

Nie trzeba rezygnować z kolorów marki. Często wystarczy zbudować skalę: ciemniejszy wariant do tekstu i przycisków, jaśniejszy do tła, osobny kolor do focusu i stany błędów z opisem. Marka nadal wygląda spójnie, ale strona jest łatwiejsza w użyciu.

Potrzeba	Dobry wzorzec	Zły wzorzec
CTA	Ciemne tło, jasny tekst, widoczny focus.	Pastelowe tło i biały tekst.
Alert błędu	Kolor, ikona i konkretny tekst.	Wyłącznie czerwona ramka.
Link w akapicie	Kolor plus podkreślenie lub wyraźny styl.	Minimalnie inny odcień tekstu.
Sekcja na zdjęciu	Nakładka, panel lub gradient pod tekstem.	Tekst bezpośrednio na jasnym, zmiennym tle.

Projektowanie stanów, nie tylko kolorów bazowych

Wiele projektów przechodzi szybki test kontrastu dla zwykłego przycisku, ale psuje się w stanach hover, disabled, focus i error. Przycisk nieaktywny może być jaśniejszy, ale nadal powinien wyglądać jak część interfejsu. Focus musi być widoczny także na kolorowym tle. Komunikat błędu musi mieć tekst, nie sam czerwony kolor.

Dla osób słabowidzących ważna jest też przewidywalność. Linki powinny wyglądać jak linki w całym serwisie. Przyciski główne powinny mieć jeden dominujący styl. Jeżeli raz kolor niebieski oznacza link, raz dekorację, a raz status, użytkownik musi zgadywać.

Tekst na zdjęciu: najczęstsza mina

Hero z tekstem na zdjęciu może wyglądać dobrze w projekcie, ale po zmianie zdjęcia albo kadru traci czytelność. Bezpieczne wzorce to ciemna nakładka, gradient, jednolity panel pod tekstem albo przeniesienie tekstu poza zdjęcie. Jeżeli tło jest zmienne, sam cień pod literami zwykle nie wystarczy.

Ten problem jest szczególnie widoczny na telefonach. Zdjęcie jest ciaśniej kadrowane, jasny fragment może trafić dokładnie pod tekst, a mały font traci kontrast. Dlatego sekcje hero i karty z obrazami trzeba sprawdzać na mobile, nie tylko w Figma lub na desktopie.

Praktyczna paleta dostępnej marki

• Kolor podstawowy: do brandingu i mocnych akcentów.
• Ciemny wariant: do tekstu, przycisków i ikon na jasnym tle.
• Jasny wariant: do tła sekcji, nie do małego tekstu.
• Kolor focusu: wyraźny i niezależny od zwykłego hovera.
• Kolor błędu: wsparty ikoną oraz tekstem komunikatu.

Dzięki takiemu podziałowi marka nie musi wybierać między estetyką a użytecznością. Kolor może zostać rozpoznawalny, ale jego zastosowanie jest kontrolowane.

FAQ

Czy najwyższy kontrast zawsze jest najlepszy?

Nie zawsze. Bardzo ostry kontrast może męczyć wzrok, ale zbyt niski kontrast jest większym problemem. Trzeba szukać czytelności, nie ekstremum.

Czy dostępna kolorystyka musi być nudna?

Nie. Dostępność wymaga dobrych relacji między kolorami, a nie rezygnacji z charakteru marki.

Czy można polegać tylko na narzędziu do kontrastu?

Nie. Narzędzie mierzy parę kolorów, ale nie oceni całej sytuacji: wielkości fontu, zdjęcia w tle, focusu, błędów formularza i kontekstu użycia.