WebAIM Color Contrast Checker w praktyce: Jak zadbać o idealny kontrast na stronie internetowej?

Znasz tę sytuację? Zgaszone światło w biurze, przed Tobą duży monitor. Jasnoszary tekst na białym tle wygląda w takich warunkach naprawdę dobrze. Oczy przyzwyczajone do przygaszonego wyświetlacza inaczej odbierają jasność, kontrast wydaje się w sam raz, więc projekt idzie do akceptacji bez sprawdzenia w jakimkolwiek narzędziu. 

A teraz zmiana otoczenia. Słoneczny dzień, trzęsący się tramwaj i ekran telefonu. Ten sam tekst w zaakceptowanym projekcie po prostu znika. Użytkownik mruży oczy. Zasłania wyświetlacz dłonią. Szuka odpowiedniego kąta. W końcu się poddaje i zamyka stronę.

Projekty rzadko trafiają do ludzi w idealnym otoczeniu. Brak kontrastu natychmiast niszczy czytelność poza biurem.

W lutym 2026 roku WebAIM przeskanował strony główne miliona witryn. Zbyt niski kontrast tekstu wykrył na 83,9% z nich, wobec 79,1% rok wcześniej. Średnio 34 osobne wystąpienia na jednej stronie. Od siedmiu lat to najczęściej wykrywany błąd dostępności w sieci i jednocześnie ten, który naprawia się zmianą kilku wartości w kodzie.

Pokazujemy, jak czytać progi WCAG bez zaglądania do dokumentacji, jak w minutę sprawdzić parę kolorów w WebAIM Color Contrast Checker i w którym momencie samo narzędzie przestaje wystarczać.

Skąd się biorą progi 4,5:1 i 3:1 w WCAG?

Kontrast w wytycznych WCAG nie ma nic wspólnego z estetyką czy harmonią kolorów. Nie chodzi tu o to, czy czerwony ładnie wygląda obok różowego albo czy cała paleta barw sprawia wrażenie spójnej. Priorytetem jest czytelność. Żółty i biały to dwa zupełnie inne kolory, a mimo to żółty tekst na białym tle znika równie skutecznie. Oba odbijają zbyt dużo światła.

Wytyczne WCAG mierzą jedynie różnicę w ilości światła odbijanego przez tekst i tło. Ten stosunek zapisuje się jako proporcję. Skala zaczyna się od 1:1, czyli dwóch identycznych odcieni, przy których tekst jest niewidoczny. Kończy się na 21:1, to maksymalny kontrast, osiągany przy czarnym tekście na czystej bieli.

Te wartości układają się w trzy poziomy zgodności. Poziom A zbiera wymagania, bez których część osób w ogóle nie skorzysta ze strony. AA dokłada to, co decyduje o wygodzie codziennego czytania, i właśnie ten poziom przyjęto w Europie za standard dla stron i sklepów. AAA idzie najdalej, ale bywa nie do pogodzenia z resztą projektu, więc same wytyczne nie zalecają wymagać go dla całego serwisu.

Progi kontrastu na poziomie AA:

• 4,5:1 dla zwykłego tekstu.
• 3:1 dla dużego tekstu, czyli od 18 punktów (ok. 24 px) albo od 14 punktów (ok. 18,66 px) przy kroju pogrubionym.
• 3:1 dla elementów interfejsu i grafik, które niosą informację. To kryterium 1.4.11 z WCAG 2.1: ramka pola formularza, ikona bez podpisu, obrys przycisku, słupek na wykresie.

Poziom AAA żąda 7:1 dla zwykłego tekstu i 4,5:1 dla dużego. W praktyce to różnica między szarością, która „daje radę”, a czernią, przy której po dwudziestu minutach czytania nie mrużysz oczu. Standardy tego nie narzucają, ale przy dłuższych tekstach opłaca się mierzyć wyżej niż w podstawowy poziom. 

Jak działa WebAIM Color Contrast Checker?

Narzędzie otwierasz w przeglądarce, jak zwykłą stronę. Nie płacisz, nie zakładasz konta, nie instalujesz wtyczki. Cały interfejs to dwa pola: kolor tekstu i kolor tła.

W oba wpisujesz kod koloru w zapisie szesnastkowym, czyli ten z kratką na początku: #FFFFFF to biel, #000000 czerń, #8F29FF fiolet. Taki kod znajdziesz w panelu kolorów każdego programu graficznego, a na gotowej stronie internetowej w arkuszu stylów albo w brandbooku marki. 

Wynik przelicza się na bieżąco, przy każdym wpisanym znaku. Nie ma przycisku „Sprawdź” ani czekania na załadowanie zmian. Poprawiasz jedną cyfrę i od razu widzisz, w którą stronę poszła proporcja.

Materiał źródłowy: WebAIM Color Contrast Checker

Wpisz kolor tekstu i kolor tła

Pod spodem od razu widzisz proporcję oraz cztery werdykty: zwykły tekst AA, duży tekst AA, zwykły tekst AAA, duży tekst AAA. Osobny wiersz odpowiada za grafiki i elementy interfejsu z progiem 3:1. Na dole dostajesz próbkę tekstu w wybranych kolorach, więc widzisz liczbę i efekt naraz.

Materiał źródłowy: WebAIM Color Contrast Checker

Pobierz kolor pipetą, gdy nie masz dostępu do kodu

Systemowy próbnik kolorów ma pipetę, którą pobierzesz wartość z dowolnego piksela ekranu. Ratuje sytuację przy audycie dowolnej strony, przy zrzucie ekranu z prezentacji albo przy makiecie w PDF-ie.

Ratuj kolor suwakiem Lightness

Najbardziej niedoceniana funkcja tego narzędzia. Suwak zmienia jasność i zostawia odcień, więc firmowy fiolet pozostaje tym samym fioletem, tylko ciemnieje o tyle, ile trzeba do przekroczenia progu.

Sprawdź linki wewnątrz tekstu

Spójrz na swój artykuł i sprawdź, po czym poznajesz w nim odnośnik. Jeśli wyłącznie po innym kolorze słowa, ten krok Cię dotyczy.

Sam kontrast linku do tła wtedy nie wystarczy. Kolor odnośnika musi się różnić także od koloru tekstu wokół niego, w proporcji co najmniej 3:1, przy zachowanych 4,5:1 obu kolorów wobec tła. To trzy pomiary naraz, więc WebAIM ma na nie osobne narzędzie: Link Contrast Checker z trzema polami zamiast dwóch.

Cały ten warunek przestaje obowiązywać, gdy linki podkreślisz. Kolor przestaje być jedynym wyróżnikiem, więc zostaje zwykłe 4,5:1 wobec tła.

Ograniczenia narzędzia: błędy kontrastu, których nie wykryje żaden skrypt

Kalkulator porównuje dwa płaskie kolory. Prawdziwa strona w sieci rzadko bywa tak prosta.

Weźmy pierwszy z brzegu przykład: nagłówek umieszczony na zdjęciu albo na gradiencie. Tło może zmieniać swoją jasność na przestrzeni zaledwie kilkudziesięciu pikseli, dlatego pojedynczy pomiar opisuje tylko konkretny fragment, podczas gdy napis obejmuje znacznie większy, zróżnicowany obszar.

Podobnie z przezroczystością. Tekst z obniżoną kryciem tylko pozornie zachowuje kolor z palety marki. W rzeczywistości jego kolor jest częściowo modyfikowany przez elementy znajdujące się pod spodem, przez co odbiega od pierwotnie założonego odcienia.

Kolejne błędy umykają uwadze z prostego powodu. W trakcie testów po prostu jeszcze ich nie ma. Kolory zwykle sprawdza się na zrzucie ekranu, podczas gdy komponenty interfejsu są dynamiczne: podświetlają się po najechaniu kursorem, zmieniają kolor po kliknięciu albo przyjmują inny wygląd po przejściu w stan uśpienia.

Bywa też odwrotnie: wartości kontrastu spełniają wymagania, a treść nadal pozostaje trudna w odbiorze. Czerwony słupek obok zielonego może mieć bardzo dobry kontrast względem białego tła, a mimo to być trudny do rozróżnienia dla osoby z zaburzeniami widzenia barw.

Z kolei cienki, elegancki krój pisma w dużym rozmiarze może formalnie spełniać wymagania dla dużego tekstu, ale w praktyce być mniej czytelny niż zwykła odmiana tego samego kroju w mniejszym rozmiarze. WCAG mierzy konkretne parametry, ale nie ocenia tego, jak projekt jest odbierany w praktyce. To wymaga już oceny wizualnej i doświadczenia projektanta.

Maksimum to nie optimum. Idealny kontrast leży w balansie. Czysta czerń na białym tle daje próg na poziomie 21:1, ale przy dłuższej lekturze tak mocne zestawienie może być mniej komfortowe dla oczu. Dlatego w wielu projektach zamiast czystej czerni stosuje się bardzo ciemne odcienie szarości, takie jak #1F1F1F. Kontrast nadal pozostaje wysoki, na poziomie około 16,5:1, ale całość jest łagodniejsza w odbiorze.

4,5:1 to absolutne minimum dla zwykłego tekstu. Przy dłuższych treściach lepiej celować w okolice 7:1. Nie oznacza to, że musisz zrezygnować z koloru firmowego. Warto stosować go na większych płaszczyznach wizualnych: w nagłówkach, przyciskach i kluczowych akcentach. Natomiast w przypadku bloków tekstowych, opisów czy stopki najważniejsza pozostaje czytelność.

Wystarczy więc ta jedna minuta w WebAIM, by projekt dopracowany w przyciemnionym biurze obronił się także na ekranie telefonu w słoneczny dzień. Odpowiedni kontrast nie ogranicza wizji projektanta. Gwarantuje po prostu, że strona przestanie być ładną makietą, a zacznie działać tam, gdzie liczy się najbardziej: w codziennym życiu Twoich użytkowników.