# Test kontrastu kolorów Porównaj tutaj kolor tekstu z kolorem tła według WCAG 2.2 albo wpisz adres strony, aby znaleźć każdy fragment tekstu poniżej minimalnego kontrastu, wraz ze zmierzonymi kolorami i najbliższym kolorem, który spełnia wymóg. ## Co sprawdza to narzędzie - Współczynnik WCAG dla dowolnych dwóch kolorów: Kalkulator korzysta ze wzoru na luminancję względną z definicji WCAG 2.2 i pokazuje wynik dla zwykłego tekstu, dużego tekstu i elementów interfejsu na poziomach AA i AAA. Działa w Twojej przeglądarce. - Obliczony kolor, który spełnia wymóg: Gdy para nie spełnia wymogu, kalkulator znajduje najbliższy kolor tekstu w tym samym odcieniu, który osiąga 4.5:1 lub 7:1, dzięki czemu zmieniasz w projekcie jak najmniej. - Każdy tekst o niskim kontraście na stronie: Skan strony uruchamia regułę color-contrast z axe-core w prawdziwej przeglądarce Chrome i wymienia każdy błędny element z kolorem tekstu, kolorem tła, rozmiarem czcionki i współczynnikiem. - Pogrupowane według par kolorów: Błędy są grupowane według koloru tekstu i tła, ponieważ jedna zmiana koloru w motywie zwykle naprawia każdy element, który go używa. - Właściwy próg dla dużego tekstu: Tekst o wielkości co najmniej 24 pikseli albo 18,66 piksela przy pogrubieniu wymaga 3:1 zamiast 4.5:1. Skan stosuje do każdego elementu właściwy próg na podstawie jego obliczonego rozmiaru i grubości czcionki. - Czego nie udało się zmierzyć i dlaczego: Tekst na obrazach, gradientach lub nachodzących na siebie elementach jest wymieniany osobno wraz z przyczyną, dzięki czemu wiesz dokładnie, co sprawdzić wzrokowo. ## Czego nie może sprawdzić - Zmierzyć kontrastu tekstu na zdjęciach, gradientach lub filmach. Oprogramowanie nie wie, która część obrazu znajduje się za każdą literą, dlatego takie elementy są wymieniane do Twojej oceny. - Sprawdzić stanów po najechaniu kursorem, fokusu ani innych. Skan widzi stronę w chwili wczytania; te kolory sprawdź w kalkulatorze. - Przeskanować ikon, obramowań i pól formularzy na stronie pod kątem WCAG 1.4.11. Kalkulator pokazuje wynik dla progu 3:1 dla każdej wpisanej pary. - Odczytać tekstu, który jest częścią obrazu, na przykład banera z wtopionym napisem. - Przetestować więcej niż podaną stronę. Pełny darmowy skan testuje do pięciu kluczowych podstron. ## Dlaczego to ważne Niski kontrast to najczęstszy błąd dostępności w internecie. Analiza WebAIM z 2026 roku, obejmująca strony główne miliona najpopularniejszych witryn, wykazała tekst o niskim kontraście na 83,9% z nich, średnio 34 przypadki na stronę. Blady tekst jest trudny do odczytania dla osób słabowidzących lub z zaburzeniami widzenia barw, a także dla każdego, kto korzysta z telefonu w pełnym słońcu. Kryterium sukcesu 1.4.3 WCAG 2.2 na poziomie AA ustala minimum na 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. To także jeden z najtańszych do naprawienia problemów: na większości stron niemal wszystkie błędy powoduje kilka kolorów motywu, a ich zmiana naprawia od razu każdą stronę. ## Jak czytać wyniki - Współczynnik kontrastu: Od 1:1 (dwa razy ten sam kolor) do 21:1 (czarny na białym). Współczynniki są zaokrąglane w dół, więc para z wynikiem 4.49:1 nie spełnia minimum 4.5:1. - Zwykły tekst, AA (4.5:1): Minimum dla tekstu głównego, linków, etykiet i tekstu przycisków zgodnie z WCAG 1.4.3. - Duży tekst, AA (3:1): Dla tekstu o wielkości co najmniej 24 pikseli albo 18,66 piksela przy pogrubieniu. WCAG definiuje duży tekst jako 18 punktów lub 14 punktów przy pogrubieniu. - AAA (7:1 i 4.5:1): Poziom podwyższony z WCAG 1.4.6. Nie jest potrzebny do zgodności z poziomem AA, ale pomaga większej liczbie czytelników. - Ikony, obramowania i pola formularzy (3:1): WCAG 1.4.11 wymaga kontrastu 3:1 względem sąsiednich kolorów dla tych części elementów sterujących i grafik, które trzeba widzieć, aby z nich korzystać. - Tekst z za niskim kontrastem: Każdy element, którego zmierzony kontrast jest poniżej progu, z selektorem, kolorami, rozmiarem i współczynnikiem. Rozwiń go, aby zobaczyć jego kod HTML i, jeśli jest dostępny, zrzut ekranu. - Do sprawdzenia wzrokowo: Tekst, którego axe-core nie mógł zmierzyć, wraz z przyczyną, na przykład obrazem lub gradientem za nim. ## Jak naprawić najczęstsze problemy - Szary tekst na białym tle: #767676 to mniej więcej najjaśniejszy szary, który osiąga 4.5:1 na białym tle (4.54:1). Jaśniejsze szarości, takie jak #999999 (2.84:1), to częsta przyczyna błędów w stopkach, podpisach, tekstach zastępczych i cenach. - Biały tekst na przycisku w kolorze marki: Jeśli biały tekst na kolorze Twojej marki nie spełnia wymogu, przyciemnij tło przycisku o kilka stopni albo użyj ciemnego tekstu. Sprawdź też kolory po najechaniu kursorem i przy fokusie, bo często są jaśniejsze. - Tekst zastępczy w formularzach: Tekst zastępczy (placeholder) to nadal tekst i wymaga 4.5:1. Jeszcze lepiej umieść nad polem widoczną etykietę, aby tekst zastępczy nie był jedyną instrukcją. - Tekst na obrazach i sliderach: Umieść tekst na jednolitym lub półprzezroczystym tle albo dodaj do obrazu ciemną nakładkę, a potem sprawdź najjaśniejszą część obrazu, która znajduje się za tekstem. - Plakietki promocji i drobny druk: Tekst w nieaktywnych elementach sterujących jest zwolniony z wymogu 1.4.3, ale plakietki promocji, ceny i informacje prawne drobnym drukiem już nie. Często to najbledszy tekst na stronach sklepu. ## Najczęściej zadawane pytania ### Jakiego współczynnika kontrastu wymagają WCAG? Na poziomie AA: 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (kryterium sukcesu 1.4.3) oraz 3:1 dla komponentów interfejsu i grafik niosących znaczenie (1.4.11). Poziom AAA wymaga 7:1 i 4.5:1 (1.4.6). ### Co uznaje się za duży tekst? WCAG definiuje tekst dużego rozmiaru jako co najmniej 18 punktów albo 14 punktów przy pogrubieniu. W pikselach CSS to około 24px albo 18,66px przy pogrubieniu. ### Czy logo musi spełniać minimum kontrastu? Nie. WCAG 1.4.3 zwalnia z tego wymogu logotypy i tekst będący częścią logo lub nazwy marki, a także tekst czysto dekoracyjny i tekst w nieaktywnych elementach sterujących. ### Dlaczego skan wymienia tekst na obrazie do sprawdzenia? axe-core mierzy jednolite kolory. Gdy za tekstem znajduje się obraz, gradient lub inny element, nie wie, które kolory się stykają, więc zamiast zgadywać, zgłasza element do sprawdzenia przez człowieka. ### Czy potrzebuję kontrastu na poziomie AAA? Poziom AAA nie jest wymagany do zgodności z poziomem AA, a W3C nie zaleca wymagania AAA dla całych witryn. Osiągnięcie 7:1 dla tekstu głównego to jednak dobra praktyka tam, gdzie pozwala na to projekt. ### Czy APCA jest częścią WCAG? Nie. APCA to inna metoda obliczania kontrastu, dyskutowana w kontekście WCAG 3, które wciąż są wersją roboczą. Zgodność mierzy się dziś współczynnikiem WCAG 2, który oblicza to narzędzie. ## Źródła - [W3C: objaśnienie kryterium sukcesu WCAG 2.2 1.4.3 Kontrast (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: objaśnienie kryterium sukcesu 1.4.6 Kontrast (podwyższony)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: objaśnienie kryterium sukcesu 1.4.11 Kontrast elementów nietekstowych](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: definicja luminancji względnej w WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: reguła color-contrast w axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)