Obietnica decyzji dla czytelnika
Jeśli chcesz, żeby tekst i interakcje w Twoim UI były czytelne dla większości użytkowników, zacznij od kontrastu i priorytetyzacji tekstu. Wyjaśnię, co musisz sprawdzić najpierw, jakie proste reguły stosować i kiedy temat robi się bardziej złożony.
Najczęstsze pytania — szybkie werdykty
Czy moja paleta musi być „żywa” i pełna barw?
Werdykt: Nie. Lepiej mieć mniejszą, przemyślaną paletę z dobrym kontrastem niż mnogość słabych kombinacji.
Czy wystarczy tylko tryb jasny (light) i ciemny (dark)?
Werdykt: To dobra podstawa, ale musisz przetestować obie wersje pod kątem kontrastu i kontekstu użycia.
Czy WCAG to jedyne źródło?
Werdykt: WCAG to standard do sprawdzania kontrastu; korzystaj też z testów użytkowników i narzędzi automatycznych. Zobacz Wytyczne WCAG. ([w3.org)
Czym są kontrast i paleta — krótko (definicja + przykład)
Kontrast to stosunek jasności między tekstem a tłem; mierzy się go jako stosunek (np. 4.5:1). W praktyce: ciemnoszary tekst na jasnoszarym tle może wyglądać elegancko, ale przy 2.8:1 będzie nieczytelny na telefonie w słońcu. Paleta to zestaw kolorów z przypisanymi rolami (tekst, tła, akcje, stany).
Jak WCAG liczy progi (łatwe wytłumaczenie)
WCAG wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu lub pogrubionego dużego tekstu — to liczby, które traktuj jako pierwszy filtr. ([w3.org)
Jak zacząć w 5–15 minut
Wyciągnij kolor tekstu i tła (CSS/inspektor).
Sprawdź kontrast w narzędziu typu WebAIM Color Contrast Checker. ([washington.edu)
Jeśli wynik < 4.5:1 dla normalnego tekstu, ciemniej/rozjaśnij jeden z kolorów; priorytetem jest tekst.
Zaktualizuj zmienne palety i powtórz testy dla hover/disabled/states.
Jeśli nie masz czasu na testy użytkowników, zacznij od tych punktów — dają największy zwrot z nakładu pracy.
Fakt → Skutek → Werdykt (konkretne przykłady)
Fakt: WCAG 1.4.3 ustawia próg 4.5:1 dla zwykłego tekstu.
Skutek: Teksty poniżej progu będą problematyczne dla osób z obniżoną czułością kontrastu i starszych użytkowników. ([w3.org)
Werdykt: Priorytet A — upewnij się, że body i elementy interakcyjne spełniają 4.5:1.
Fakt: Odsetek osób z zaburzeniami percepcji barw to kilka procent populacji, ale inne problemy wzroku (kontrast) dotykają więcej osób. ([webaim.org)
Skutek: Poleganie wyłącznie na kolorze jako nośniku informacji to ryzyko.
Werdykt: Nigdy nie używaj koloru jako jedynego wskaźnika stanu.
Tabela: progi kontrastu i mini-werdykt
| Element | Minimum (WCAG) | Mini-werdykt |
|---|---|---|
| Zwykły tekst | 4.5:1 | Wymagane — napraw jeśli niżej |
| Duży tekst / pogrubiony | 3:1 | Akceptowalne dla nagłówków dużych rozmiarów |
| Pełne spektrum (AAA) | 7:1 | Opcjonalne — kiedy chcesz maksymalnej czytelności |
Źródło: W3C / WCAG 2.1. ([w3.org)
Plusy, minusy i typowe skargi po wdrożeniu
Plusy:
Czytelność rośnie natychmiast po poprawie kontrastu.
Mniej zgłoszeń accessibility od użytkowników.
Typowe skargi po zmianach:
Designerzy mówią, że „traci się subtelność” — to możliwe; rozwiązanie: wprowadź więcej neutralnych szarości i ogranicz akcenty.
Marketing chce jasnych brandowych odcieni, które nie spełniają kontrastu — tu trzeba kompromisu: brandowy kolor do akcentów, a wariant kontrastowy dla tekstu.
Synteza: poprawa kontrastu to najtańszy i najszybszy sposób na realną poprawę dostępności.
Werdykt per segment
Dla małego produktu/landing page, który ma prostą treść: priorytet A — zadbaj o 4.5:1 dla tekstu i 3:1 dla nagłówków.
Dla złożonego serwisu z wieloma komponentami: priorytet A + testy użytkowników; zaplanuj kontrolę kontrastu w każdym stanie komponentu.
Dla brandów o silnych kolorach korporacyjnych: negocjuj warianty kolorów dla UI (np. brand-color + brand-color-darkened dla tekstu).
Narzędzia, które warto znać (krótko)
WebAIM Color Contrast Checker — szybkie sprawdzenie par kolorów. ([washington.edu)
Stark (pluginy do Sketch/Figma) — integracja w procesie projektowym. (sprawdź wtyczki w swoim narzędziu).
Automatyczne testy kontrastu w CI — przydatne przy dużych repozytoriach.
Co sprawdzić, jeśli coś jest niepewne
Jeżeli masz wątpliwości co do dokładnego rozmiaru tekstu przekładającego się na „large text” (punkty → piksele), porównaj metrykę w narzędziu devtools albo dokumentacji fontu; dokument W3C zawiera szczegóły metryk. Jeśli potrzebujesz potwierdzenia statystyk użytkowników, użyj badań z WebAIM lub lokalnych badań użytkowników. ([w3.org)
Podsumowanie — jednoznaczna puenta
Zacznij od kontrastu: ustaw 4.5:1 dla zwykłego tekstu i 3:1 dla dużego; zmierz w narzędziu; wprowadź warianty kolorów dla brandu zamiast używać jednego odcienia. To daje największą poprawę używalności przy najmniejszym wysiłku. Jeśli twoje UI ma ograniczony budżet na testy, te kroki powinny być pierwsze.
Źródła i dalsza lektura: Wytyczne WCAG. ([w3.org)
