Najważniejsze wnioski
- Próg 4,5:1 jest minimum WCAG AA dla większości zwykłego tekstu, w tym etykiet formularzy, linków, tekstu przycisków i komunikatów.
- Próg 3:1 dla tekstu dotyczy wyłącznie tekstu dużego: co najmniej 18 pt albo 14 pt pogrubionego, czyli orientacyjnie około 24 CSS px lub 18,5 CSS px bold.
- Dla elementów interfejsu, ich stanów oraz istotnej grafiki obowiązuje zwykle 3:1 względem sąsiednich kolorów, jeśli informacja wizualna jest potrzebna do obsługi lub zrozumienia.
- Pomiar trzeba wykonywać na rzeczywiście wyrenderowanym widoku, także w stanach hover, focus, error, selected oraz na tle zdjęć, gradientów i wideo.
- Tryby kontrastu i narzędzia typograficzne WCAGbot wspierają użytkownika podczas korzystania ze strony, ale nie zastępują audytu ani źródłowej poprawy kolorów, komponentów i treści.
Dla zarządzającego
Niski kontrast jest ryzykiem użyteczności i dostępności, które często powtarza się w szablonach, formularzach oraz komponentach e-commerce. Warto potraktować go jako element stałego procesu jakości: ustalić tokeny kolorów, sprawdzić kluczowe ścieżki zakupowe i naprawiać problemy w kodzie źródłowym. Widget może być szybkim wsparciem dla użytkownika, lecz nie jest dowodem pełnej zgodności strony.
Dla sprzedaży
Przy rozmowie o kontraście warto unikać obietnicy „pełnej zgodności po instalacji”. WCAGbot można przedstawić jako rozwiązanie, które użytkownik może uruchomić od razu: przetestować tryby kontrastu, zwiększyć tekst, zmienić odstępy i skorzystać z funkcji skupienia. Równolegle firma powinna planować audyt oraz poprawki w interfejsie, treści i formularzach.
Kontrast 4,5:1 należy mierzyć dla większości tekstów na stronie, a 3:1 stosować tylko w konkretnych przypadkach: dla dużego tekstu oraz dla wielu elementów interfejsu i grafik informacyjnych. Nie są to dwa równorzędne warianty do swobodnego wyboru. Właściwy próg zależy od tego, co użytkownik widzi, jaką funkcję pełni element i względem jakiego tła jest renderowany.
W sklepie internetowym błąd kontrastu rzadko dotyczy wyłącznie tekstu w hero na stronie głównej. Często pojawia się w etykietach pól, filtrach, komunikatach walidacyjnych, nieaktywnych wizualnie zakładkach, ikonach koszyka, granicach inputów i fokusie klawiaturowym. Dlatego pomiar powinien obejmować całą ścieżkę: produkt, koszyk, dane klienta, płatność oraz potwierdzenie zamówienia.
Najważniejsze wnioski
- 4,5:1 to minimum dla zwykłego tekstu na poziomie WCAG AA.
- 3:1 dla tekstu jest możliwe tylko wtedy, gdy tekst spełnia definicję dużego tekstu.
- 3:1 dla interfejsu dotyczy między innymi granic kontrolek, ikon funkcjonalnych i wizualnych stanów komponentów.
- Trzeba mierzyć widok po wyrenderowaniu, a nie wyłącznie kolory zapisane w design systemie lub arkuszu CSS.
- Tryby kontrastu WCAGbot mogą pomóc użytkownikowi czytać stronę wygodniej, ale trwałą barierę usuwa się przez poprawkę w kodzie i treści.
Czym różnią się progi 4,5:1 i 3:1?
Współczynnik kontrastu opisuje różnicę luminancji między jaśniejszym i ciemniejszym kolorem. Nie oznacza, że kolor ma być „cztery i pół razy ciemniejszy”. Zgodnie z metodą W3C stosuje się wzór (L1 + 0,05) / (L2 + 0,05), gdzie L1 oznacza luminancję jaśniejszego koloru, a L2 ciemniejszego. Wynik mieści się w zakresie od 1:1 do 21:1.
To ważne, ponieważ projekt oceniany wyłącznie wzrokiem może wprowadzać w błąd. Dwa kolory mogą być wyraźnie różne odcieniem, a mimo to mieć zbyt zbliżoną luminancję. Klasyczny przykład to zielony komunikat na czerwonym tle albo jasnoniebieski link na białym tle. Różnica barwy nie zastępuje wymaganego kontrastu.
| Co sprawdzasz? | Minimalny próg WCAG AA | Przykłady | Na co uważać? |
|---|---|---|---|
| Zwykły tekst | 4,5:1 | Akapity, linki, etykiety, ceny, tekst przycisków, błędy formularza | Nagłówek nie staje się „dużym tekstem” tylko przez nazwę w projekcie. |
| Duży tekst | 3:1 | Duży nagłówek, duża cena promocyjna, istotny tekst kampanijny | Sprawdź rzeczywisty rozmiar i pogrubienie po wyrenderowaniu. |
| Komponenty interfejsu i stany | 3:1 | Obrys inputu, checkbox, aktywna zakładka, ikona, uchwyt suwaka | Próg ma znaczenie, gdy informacja wizualna jest potrzebna do rozpoznania lub obsługi. |
| Grafika informacyjna | 3:1 | Linie wykresu, symbole statusu, znaczniki mapy, wskaźniki postępu | Sprawdź najmniej kontrastujący fragment istotnego elementu. |
| Tekst na poziomie AAA | 7:1 | Tekst zwykły w serwisie o podwyższonych wymaganiach | To wyższy poziom niż standardowe minimum AA. |
Kiedy tekst może mieć kontrast 3:1?
WCAG pozwala na 3:1 dla tekstu dużego. Definicja jest konkretna: tekst niepogrubiony powinien mieć co najmniej 18 punktów, a pogrubiony co najmniej 14 punktów. W technikach W3C przyjmuje się orientacyjnie, że odpowiada to około 24 CSS px dla tekstu zwykłego i około 18,5 CSS px dla tekstu pogrubionego.
Nie należy oceniać tego po nazwie tokenu, na przykład heading-xl, ani po wrażeniu wizualnym. Liczy się faktycznie wyświetlony rozmiar oraz grubość kroju. Tekst 16 px o wadze 400 i kontraście 3,8:1 nie spełnia minimum dla zwykłego tekstu, nawet jeśli znajduje się w dużym przycisku albo jest nagłówkiem sekcji.
Kontrast 3:1 nie jest „niższym standardem dla tekstu”. To wyjątek, który działa tylko wtedy, gdy tekst rzeczywiście jest duży.
Jeżeli zespół rozwija system projektowy, praktycznym rozwiązaniem jest przypisanie progów kontrastu do tokenów typograficznych. Każdy token tekstu powinien mieć jasno opisaną parę: kolor tekstu, dopuszczalne tła, minimalny rozmiar i grubość. Takie zasady ograniczają przypadkowe użycie jasnoszarego tekstu w opisach produktów, filtrach i tabelach.
Co mierzyć na stronie sklepu lub usługi cyfrowej?
Tekst, który przekazuje treść lub instrukcję
Kiedy mierzyć kontrast 4,5:1, a kiedy 3:1?
W pierwszej kolejności sprawdź tekst, który użytkownik musi przeczytać, aby znaleźć produkt, zrozumieć ofertę albo ukończyć zadanie. Zwykle obowiązuje dla niego 4,5:1.
- teksty akapitów, nagłówki i opisy produktów;
- linki w treści, nawigacji i stopce;
- ceny, rabaty, dostępność produktu i warianty;
- etykiety formularzy oraz tekst wpisany do pola;
- teksty przycisków, także „Dodaj do koszyka” i „Przejdź do płatności”;
- komunikaty o błędach, sukcesie i wymaganych polach;
- tekst w tabelach, tooltipach, modalu i rozwijanych listach;
- placeholdery, jeśli pełnią funkcję instrukcji lub jedynej etykiety.
Formularze są szczególnie ważne, ponieważ użytkownik może nie dokończyć zakupu, gdy nie odczyta etykiety lub komunikatu błędu. Szerszą listę kontrolną znajdziesz w artykule Dostępność sklepu internetowego – checklista pierwszych kroków.
Tło pod tekstem, a nie tylko kolor w CSS
Tekst trzeba porównać z tłem znajdującym się bezpośrednio za znakami. Przy jednolitym kolorze zadanie jest proste. Przy zdjęciu produktu, gradiencie, półprzezroczystej nakładce albo wideo wynik może zmieniać się w różnych miejscach komponentu.
W takich przypadkach sprawdź najmniej korzystny fragment tła. Jeśli biały tekst przechodzi przez jasny fragment zdjęcia, nie wystarczy, że kontrast jest poprawny nad ciemnym obszarem. Trwałe rozwiązanie może obejmować jednolitą warstwę pod tekstem, mocniejszy overlay, zmianę koloru tekstu, inny kadr albo wyraźne halo. Samo zwiększenie rozmiaru fontu nie usuwa problemu, gdy tekst wciąż nie spełnia progu dla swojej kategorii.
Granice kontrolek, ikony i stany komponentów
Kryterium 1.4.11 WCAG 2.2 dotyczy kontrastu elementów nietekstowych. W praktyce mierzysz tu przede wszystkim informacje wizualne potrzebne do rozpoznania komponentu albo jego bieżącego stanu. Minimalny próg wynosi zazwyczaj 3:1 względem sąsiadujących kolorów.
Sprawdź między innymi:
- obrys pola tekstowego, pola wyszukiwania i selecta;
- checkboxy, przyciski radiowe oraz przełączniki;
- ikony bez wystarczającej etykiety tekstowej;
- stan zaznaczenia filtra, rozmiaru lub wariantu produktu;
- aktywną zakładkę, pozycję menu i rozwinięty akordeon;
- uchwyt suwaka ceny oraz wskaźnik postępu;
- obramowanie karty, jeżeli właśnie ono komunikuje klikowalność;
- ikony błędu, sukcesu, ostrzeżenia i dostępności produktu.
Nie każdy dekoracyjny border wymaga kontrastu 3:1. Zadaj sobie pytanie: czy bez dostrzeżenia tego obrysu, symbolu lub koloru użytkownik rozpozna kontrolkę albo jej stan? Jeśli odpowiedź brzmi „tak”, element należy sprawdzić.
Kontrast nie zwalnia też z kryterium dotyczącego użycia koloru. Błąd formularza nie powinien być przekazany tylko przez czerwony obrys. Dodaj tekstową informację, ikonę lub inne rozróżnienie. Zobacz również, jak dostępność łączy się z zasadą postrzegalności w tekście Cztery zasady WCAG na przykładzie sklepu internetowego.
Fokus klawiaturowy wymaga osobnego testu
Użytkownik klawiatury musi widzieć, który element jest aktualnie aktywny. Przejdź stronę klawiszem Tab i sprawdź kolejno menu, wyszukiwarkę, filtry, karty produktów, przyciski, formularz i okna modalne. Pełną instrukcję znajdziesz we wpisie Nawigacja klawiaturą: test strony bez myszy w 15 minut.
W WCAG 2.2 kryterium 2.4.13 Focus Appearance na poziomie AAA opisuje między innymi zmianę kontrastu co najmniej 3:1 między stanem nieaktywnym i aktywnym. To inny pomiar niż kontrast tekstu względem tła. W tym przypadku oceniasz zmianę wyglądu wskaźnika fokusu pomiędzy stanami. Nawet jeśli projekt nie deklaruje celu AAA, wyraźny fokus jest praktycznym warunkiem sprawnej obsługi strony bez myszy.
Jak wykonać pomiar kontrastu krok po kroku?
Najlepiej nie zaczynać od losowego skanowania całej witryny. Wybierz najpierw widoki i zadania, które mają znaczenie biznesowe oraz użytkowe: wyszukanie produktu, ustawienie filtrów, dodanie do koszyka, złożenie zamówienia, wysłanie formularza kontaktowego i logowanie.
- Ustal listę ekranów i komponentów. Obejmij wersję desktopową i mobilną, a także jasny oraz ciemny motyw, jeśli strona je oferuje.
- Rozdziel elementy na tekst, interfejs i grafikę. Dzięki temu nie pomylisz progu 4,5:1 z 3:1.
- Sprawdź element w rzeczywistym kontekście. Otwórz stronę w przeglądarce, uruchom komponent i mierz kolory po wyrenderowaniu.
- Przejdź przez stany. Zbadaj co najmniej stan domyślny, hover, focus lub focus-visible, active, selected, expanded, error, success i loading — jeśli występują.
- Ustal właściwy próg. Dla zwykłego tekstu użyj 4,5:1, dla dużego tekstu 3:1, a dla rozpoznawalnych komponentów i ich stanów zazwyczaj 3:1.
- Zapisz wynik z kontekstem. Notuj adres widoku, komponent, stan, kolory, wynik, wymagany próg oraz rekomendowaną poprawkę.
- Napraw źródłowo i wykonaj retest. Korekta powinna trafić do tokenu, komponentu lub stylu, a nie tylko do pojedynczego ekranu kampanii.
Procedura pomiaru kontrastu na stronie
Automatyczne narzędzia dobrze wykrywają część problemów kontrastu, ale nie rozumieją zawsze intencji projektu, dynamicznego tła ani tego, czy obrys pełni funkcję informacyjną. Dlatego wynik skanera traktuj jako listę do weryfikacji, a nie końcowy werdykt. To samo dotyczy pełnej dostępności: widget dostępności a zgodność z WCAG to dwa różne zagadnienia.
WCAGbot Accessibility Path: od szybkiego wsparcia do napraw źródłowych
WCAGbot Accessibility Path porządkuje działania, gdy firma chce szybko wesprzeć użytkowników, a jednocześnie nie odkładać trwałych zmian.
- Uruchom funkcje wspierające dostępność. WCAGbot można dodać jedną linią kodu bez przebudowy witryny.
- Sprawdź stronę z perspektywy użytkownika. Otwórz panel i przetestuj kontrast, zwiększenie tekstu, interlinię, odstępy liter oraz czytanie treści.
- Zidentyfikuj bariery źródłowe. Zapisz elementy, które pozostają nieczytelne, nie mają właściwych stanów lub wymagają zmiany komponentu.
- Wykonaj audyt i naprawę źródłową. Popraw kolory, etykiety, strukturę, komunikaty i zachowanie interfejsu w kodzie oraz treści.
- Retestuj kluczowe zadania. Wróć do koszyka, płatności, formularzy i obsługi klawiaturą po każdej większej zmianie.
CTA doświadczeniowe: po instalacji lub demonstracji WCAGbot otwórz panel na własnej stronie, włącz tryb kontrastu, zwiększ tekst i przejdź do formularza lub koszyka. Zobacz, które elementy stają się wygodniejsze do odczytania, a które nadal wymagają poprawki po stronie projektu lub kodu. Funkcje opisujemy szerzej we wpisie Kontrast, większy tekst i czytanie treści w WCAGbot.
Widget wspiera dostępność, między innymi przez tryby kontrastu, narzędzia typograficzne, funkcje skupienia i sześć gotowych profili użytkownika. Nie zastępuje jednak audytu WCAG, testów z użytkownikami, ręcznej oceny komponentów ani naprawy kontrastu zapisanego w kodzie strony. Instalację rozwiązania opisuje artykuł Jak zainstalować WCAGbot na stronie w 5 minut.
Mini-scenariusz: formularz checkoutu z jasnym obrysem
Scenariusz ilustracyjny — nie przedstawia wyników realnego wdrożenia klienta. Sklep ma formularz zamówienia z jasnoszarymi obrysami pól na białym tle. Etykiety są ciemne i czytelne, ale granice pustych pól są prawie niewidoczne. Po kliknięciu w pole obrys zmienia się na pastelowy niebieski, a przy błędzie na pastelowy czerwony.
W takim przypadku zespół powinien rozdzielić trzy pomiary. Po pierwsze, mierzy kontrast etykiety i wpisywanego tekstu względem tła pola — zwykle wymagane jest 4,5:1. Po drugie, mierzy obrys pola względem białego tła oraz stan focus i error względem stanu zwykłego — wizualne informacje potrzebne do rozpoznania stanu powinny być dostrzegalne, zwykle przy progu 3:1 dla komponentu nietekstowego. Po trzecie, sprawdza, czy błąd jest komunikowany również tekstem, a nie tylko czerwienią.
Naprawa może polegać na zastosowaniu ciemniejszego obrysu, wyraźniejszego wskaźnika fokusu i komunikatu typu „Wpisz poprawny kod pocztowy” przy polu. To przykład poprawki źródłowej. Tryb kontrastu w widgetcie może jednocześnie ułatwić części użytkowników odczyt bieżącej strony, ale nie powinien być traktowany jako zamiennik poprawienia formularza.
Dlaczego warto mierzyć kontrast poza tekstem?
Raport WebAIM Million 2025 wskazuje niski kontrast tekstu jako jeden z najczęściej wykrywanych problemów automatycznej analizy stron głównych. Nie oznacza to, że automatyczny skan potrafi ocenić całą dostępność ani że każda wykryta instancja jest osobnym komponentem. Pokazuje jednak, że kontrast jest powtarzalnym problemem implementacyjnym.
Formularz zamówienia: miejsca krytyczne dla kontrastu
W e-commerce liczy się nie tylko przeczytanie opisu. Użytkownik musi też zobaczyć, który filtr wybrał, gdzie znajduje się fokus, czy pole jest błędne i czy przycisk jest dostępny. Wymagania WCAG są jednym z elementów szerszego kontekstu dostępności cyfrowej. Jeśli analizujesz obowiązki związane z usługami e-commerce, przeczytaj także EN 301 549 dla e-commerce: wymagania poza samym WCAG oraz Czy Polski Akt o Dostępności dotyczy sklepu online?.
FAQ: kontrast 4,5:1 i 3:1
Czy każdy tekst na stronie musi mieć kontrast 4,5:1?
Nie. Zwykły tekst powinien spełniać 4,5:1 na poziomie WCAG AA. Tekst duży może spełniać próg 3:1, jeśli osiąga co najmniej 18 pt albo 14 pt przy pogrubieniu. Tekst dekoracyjny lub nieaktywny może podlegać wyjątkom, ale takie przypadki trzeba oceniać ostrożnie.
Czy nagłówek zawsze można sprawdzać według progu 3:1?
Nie. Samo semantyczne oznaczenie nagłówka nie wystarcza. Trzeba sprawdzić rzeczywisty rozmiar i grubość tekstu po wyrenderowaniu. Mały nagłówek nadal jest zwykłym tekstem w rozumieniu kryterium kontrastu.
Czy tekst w przycisku wymaga 4,5:1?
Zwykle tak. Tekst przycisku jest tekstem i należy go porównać z tłem przycisku. Równolegle sam przycisk, jego ikona lub stan może wymagać oceny jako komponent nietekstowy przy progu 3:1.
Czy obrys pola formularza musi mieć kontrast 3:1?
Jeżeli obrys jest potrzebny, aby użytkownik rozpoznał pole lub jego stan, należy go sprawdzić według kryterium kontrastu nietekstowego. Nie każdy dekoracyjny cień lub border jest informacją obowiązkową, ale granice pustego inputu często pełnią funkcję rozpoznawczą.
Czy placeholder zastępuje etykietę pola?
Nie powinien być jedyną etykietą. Placeholder znika po wpisaniu danych, bywa odczytywany niejednoznacznie i często ma zbyt niski kontrast. Dostępny formularz potrzebuje trwałej, widocznej etykiety oraz czytelnych instrukcji i komunikatów błędów.
Czy kontrast 3:1 wystarczy dla ikony?
Jeżeli ikona przekazuje funkcję lub informację potrzebną do zrozumienia interfejsu, zwykle należy sprawdzić ją przy progu 3:1 względem sąsiednich kolorów. Jeśli ikona ma etykietę tekstową, nadal warto ocenić jej czytelność, ale kontekst może wpływać na szczegóły oceny.
Czy czerwony i zielony komunikat są dostępne, gdy mają dobry kontrast?
Nie zawsze. Kontrast jest ważny, ale informacja nie może być przekazana wyłącznie kolorem. Dodaj tekst, ikonę, symbol lub inny sygnał, dzięki któremu status będzie zrozumiały także dla osób nierozróżniających części barw.
Jak mierzyć tekst na zdjęciu lub gradiencie?
Sprawdź kontrast w najmniej korzystnym miejscu za tekstem. Gdy tło jest zmienne, pomocne może być zastosowanie jednolitej nakładki, tła pod tekstem, obrysu lub zmiana kompozycji. Nie oceniaj wyłącznie koloru zdjęcia wskazanego w projekcie.
Czy stan hover trzeba badać, jeśli strona ma działać na urządzeniach dotykowych?
Tak, jeśli hover występuje w wersji desktopowej. Każdy dostępny stan wizualny może zmieniać kontrast tekstu lub komponentu. Dodatkowo należy sprawdzić focus i focus-visible, ponieważ są ważne dla osób korzystających z klawiatury.
Czy WCAGbot naprawia niski kontrast w kodzie strony?
WCAGbot oferuje funkcje wspierające dostępność, w tym tryby kontrastu i narzędzia ułatwiające czytanie. Nie zastępuje jednak źródłowej naprawy kolorów, komponentów i treści ani audytu WCAG. Gdy projekt ma niewłaściwe pary kolorów, należy poprawić je w implementacji strony.
Czy spełnienie 4,5:1 oznacza, że tekst będzie czytelny dla każdego?
Nie. To techniczne minimum WCAG AA, a nie gwarancja komfortu dla wszystkich użytkowników. Na czytelność wpływają także rozmiar tekstu, interlinia, szerokość kolumny, krój pisma, oświetlenie, urządzenie i indywidualne potrzeby użytkownika.
Podsumowanie: zacznij od właściwego progu i realnego widoku
Najprostsza zasada brzmi: dla zwykłego tekstu przyjmij 4,5:1, a dla dużego tekstu, istotnych elementów interfejsu i grafiki informacyjnej sprawdź 3:1 zgodnie z odpowiednim kryterium WCAG. Następnie wyjdź poza pojedynczy screen: zmierz stany komponentów, formularze, fokus klawiaturowy oraz tekst na zmiennym tle.
Dodaj funkcje poprawiające dostępność swojej strony i przetestuj WCAGbot na własnym przykładzie. Dodaj funkcje dostępności.
Źródła i materiały
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.3
- W3C, Understanding Success Criterion 1.4.3 Contrast (Minimum)
- W3C, Understanding Success Criterion 1.4.11 Non-text Contrast
- W3C, Understanding Success Criterion 1.4.6 Contrast (Enhanced)
- WebAIM Million 2025
- W3C, Understanding Success Criterion 1.4.1 Use of Color
- www.w3.org
- www.w3.org
- webaim.org
- accessibility.build
- www.w3.org
- www.w3.org
