Darmowe narzędzie: Dostępność

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.

Kalkulator kontrastu

Wpisz kolor tekstu i kolor tła. Wszystkie obliczenia odbywają się w Twojej przeglądarce.

Tak wygląda zwykły tekst o wielkości 16 pikseli.

Duży tekst o wielkości 24 pikseli

Obramowanie przycisku

Współczynnik kontrastu4.54:1

Wyniki WCAG 2.2 dla tych kolorów
Zwykły tekst, AAWCAG 1.4.3, wymaga 4.5:1Spełnia
Duży tekst, AAWCAG 1.4.3, wymaga 3:1Spełnia
Zwykły tekst, AAAWCAG 1.4.6, wymaga 7:1Nie spełnia
Duży tekst, AAAWCAG 1.4.6, wymaga 4.5:1Spełnia
Ikony, obramowania i pola formularzyWCAG 1.4.11, wymaga 3:1Spełnia

Najbliższe kolory tekstu, które spełniają wymóg na tym tle

Duży tekst to co najmniej 24 piksele albo 18,66 piksela przy pogrubieniu. Współczynniki są zaokrąglane w dół, więc 4.499:1 jest pokazywane jako 4.49:1 i nie spełnia wymogu, zgodnie z intencją WCAG.

Albo przeskanuj stronę w poszukiwaniu tekstu o niskim kontraście

Za darmo. Sprawdza wpisany adres w około 20 sekund.

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.

Niski kontrast kolorów: dlaczego to ważne i jak go poprawić w Shopify, WooCommerce i na każdej stronie

Pytania o to narzędzie

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

Powiązane narzędzia

Raport naprawy dostępności ($174, jednorazowo) zaczyna od pełnego darmowego skanu i dodaje więcej podstron, zmianę do wprowadzenia dla każdego wykrytego problemu, plik PDF i ponowne testy do weryfikacji poprawek.

Raport naprawy dostępności: szczegóły