Obietnica decyzji i grupa docelowa
Ten artykuł da ci szybki, praktyczny werdykt: jak bez dostępu do kodu sprawdzić i poprawić kontrast tekstu i elementów UI na landing page. Czytasz, jeśli jesteś projektantem, product managerem lub marketerem odpowiedzialnym za widoczność i konwersję. Krótko: za 5–15 minut sprawdzisz najważniejsze elementy i dostaniesz konkretne narzędzia.
Szybkie pytania (i konkretny kierunek)
Czy mój body text spełnia WCAG? — Jeśli ratio < 4.5:1 → popraw kolor tekstu lub tła. (patrz definicje niżej). ([w3.org)
Czy linki muszą mieć osobny kontrast? — Jeśli link rozróżniany jest tylko kolorem, wymagane min. 3:1 względem tekstu otoczenia; najlepsza praktyka: podkreślenie + 4.5:1 względem tła. ([webaim.org)
Mogę to zrobić bez Figma/HTML? — Tak: użyj online checkerów i extensionów (WebAIM, Contrast Ratio, Colour Contrast Analyser, Stark). Jeśli chcesz szybko — użyj WebAIM. ([webaim.org)
Czym jest kontrast i jakie są normy (krótko)
Kontrast to stosunek luminancji między dwoma kolorami; standardowo podawany jako np. 4.5:1. WCAG wymaga minimum 4.5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (lub pogrubionego w pewnych rozmiarach). To reguła formalna, którą sprawdzają audyty dostępności. Co to znaczy w praktyce: jeśli twoje nagłówki są duże (≥24px) możesz mieć niższy próg; tylko tekst informacyjny dla użytkownika powinien mieć ≥4.5:1. ([w3.org)
Co jeszcze warto wiedzieć o wymogach
WCAG ma też poziom AAA (ostrzejszy: 7:1 dla normalnego tekstu) oraz wyjątki (logotypy, tekst dekoracyjny). Jeśli potrzebujesz legalnej zgodności, sprawdź dokument W3C. Jeśli nie widzisz jednoznacznego wyniku w narzędziu — zapisz kolory i porównaj ręcznie na stronie W3C. ([w3.org)
Jak zacząć (krok po kroku, bez kodu)
Zrób screenshot strony (lub elementu) — to pozwoli szybko wybrać kolory narzędziem.
Otwórz WebAIM Contrast Checker i wklej/wybierz kolory (foreground/background). Szybki wynik PASS/FAIL dla AA/AAA pojawi się natychmiast. ([webaim.org)
Jeśli pracujesz w Figma/Sketch: zainstaluj Stark i sprawdź warstwy bez eksportu. To narzędzie pokazuje ratio i podpowiada alternatywne kolory. ([hackdesign.org)
Dla plików desktopowych (PowerPoint, PDF) użyj Colour Contrast Analyser (aplikacja desktopowa) — potrafi wyłapać kolory z ekranu i ocenić WCAG. ([vispero.com)
Narzędzia — krótka ściąga i mini-werdykt
| Narzędzie | Co robi | Mini-werdykt |
|---|---|---|
| WebAIM Contrast Checker | Online, szybkie sprawdzenie kontrastu i linków | Dobry start (bez instalacji). ([webaim.org) |
| Contrast Ratio (Lea Verou) | Prosty kalkulator, pozwala wpisywać dowolne formaty CSS | Lekki i szybki do testów koncepcyjnych. ([lea0.verou.me) |
| Stark (plugin/extension) | Integruje się z Figma/Sketch/Chrome, automatyczne skany | Najlepsze dla designu — łapie problemy wcześniej. ([hackdesign.org) |
| Colour Contrast Analyser (CCA) | Desktop app, eyedropper z ekranu, WCAG AA/AAA | Dobre do plików i non-web (precyzyjne). ([github.com) |
Fakt → Skutek → Werdykt (przykłady)
Fakt: Tekst z kontrastem 2.5:1 często jest nieczytelny dla osób z niedowidzeniem. Skutek: spadek czytelności i wyższy bounce rate na mobilnych CTA. Werdykt: nie używaj tak niskich kontrastów dla tekstu informacyjnego.
Fakt: Linky rozpoznawane tylko kolorem bywają nieczytelne dla użytkowników z daltonizmem. Skutek: obniżona użyteczność i dostępność. Werdykt: zawsze dodawaj podkreślenie lub inną wskazówkę poza kolorem. ([webaim.org)
Typowe błędy (bez kodu)
Poleganie wyłącznie na estetyce palety zamiast na liczbach (ratio).
Kopiowanie kolorów z brand book bez sprawdzenia kontekstu (tło/gradient/overlay zmienia ratio).
Testowanie tylko nagłówków, a ignorowanie małych opisów i linków.
Werdykt per segment
Dla copywriterów i marketerów: ważne — upewnij się, że CTA ma kontrast ≥4.5:1; jeśli priorytetem konwersja → popraw kolor CTA.
Dla UX/UI designerów: priorytet — włącz Stark/auto-scan w designie, żeby wykryć problemy przed deweloperami. ([hackdesign.org)
Dla PMów bez dostępu do kodu: wystarczające — WebAIM + screenshoty i zgłoszenie zmiany do zespołu dev.
Plusy i minusy podejścia „bez kodu”
Plusy:
Szybkość: narzędzia online dają wynik w minutę.
Niski próg wejścia: nie potrzeba devów ani deployów.
Minusy:Kontekst: narzędzie może nie uwzględnić nakładek/animacji/gradientów; wtedy potrzebujesz narzędzia, które sprawdza elementy na żywo. ([getstark.co)
Podsumowanie — kto powinien to zrobić i co teraz
Idealne dla: projektantów i marketerów, którzy potrzebują szybkiego audytu kontrastu bez edycji kodu.
Będzie frustrować: gdy twoje kolory żyją w dynamicznych nakładkach, gradientach lub mają zmienne opacities — wtedy potrzebne są narzędzia skanujące live DOM lub współpraca z deweloperem. Jeśli wynik w narzędziu jest niejasny, zapisz HEX/rgba i porównaj na oficjalnej stronie W3C lub w narzędziu desktopowym (CCA). ([w3.org)
Prosty next step: zrób screenshot kluczowego ekranu i uruchom WebAIM Contrast Checker — to da ci natychmiastowy PASS/FAIL i listę elementów do poprawy. ([webaim.org)
