Sprawdzanie kontrastu kolorów

Darmowe sprawdzanie kontrastu WCAG. Podaj kolor tekstu i tła, aby poznać współczynnik kontrastu, wyniki AA/AAA i najbliższy spełniający kolor.

Kolor tekstu

Kolor tła

Współczynnik kontrastu

–

Wyniki WCAG 2.2

	AA	AAA
Zwykły tekst
Duży tekst
Komponenty interfejsu i grafika		–

Podgląd

Zwykły tekst (16 px). Pchnąć w tę łódź jeża lub ośm skrzyń fig.

Duży tekst (24 px)

Duży pogrubiony tekst (18,66 px, pogrubienie)

Przycisk

Propozycje

Cel

Najbliższy spełniający kolor tekstu

–

Najbliższy spełniający kolor tła

–

Jak sprawdzić kontrast kolorów

Podaj Kolor tekstu i Kolor tła. Użyj próbek kolorów albo wpisz w polach dowolną wartość CSS: kod HEX, np. #595959, rgb(89 89 89), hsl(0 0% 35%) lub nazwę, np. navy.
Współczynnik kontrastu aktualizuje się w trakcie pisania – od 1:1 (brak kontrastu) do 21:1 (czarny na białym).
Tabela Wyniki WCAG 2.2 pokazuje Spełnia lub Nie spełnia dla kategorii Zwykły tekst, Duży tekst oraz Komponenty interfejsu i grafika na poziomach AA i AAA.
Sprawdź Podgląd: pokazuje zwykły tekst, duży tekst, duży pogrubiony tekst, obrys przycisku i ikonę w twoich dwóch kolorach.
Jeśli któryś poziom nie jest spełniony, wybierz Cel w sekcji Propozycje. Narzędzie zaproponuje Najbliższy spełniający kolor tekstu i Najbliższy spełniający kolor tła. Kliknij Użyj, aby zastosować propozycję. Zamień kolory zamienia tekst z tłem.

Wszystko jest liczone w twojej przeglądarce; nic nie jest nigdzie wysyłane.

Jak liczony jest współczynnik kontrastu

WCAG 2.x definiuje współczynnik jako (L1 + 0,05) / (L2 + 0,05), gdzie L1 to luminancja względna jaśniejszego koloru, a L2 – ciemniejszego. Luminancję względną liczy się z linearyzowanych kanałów sRGB: każdy kanał jest dekodowany krzywą przejścia sRGB, a następnie L = 0,2126 R + 0,7152 G + 0,0722 B. Zielony waży najwięcej, bo oko jest na niego najbardziej wrażliwe – dlatego czysta zieleń wygląda na znacznie jaśniejszą niż czysty błękit o tej samej „sile”.

Współczynnik nigdy nie jest zaokrąglany w górę. #777777 na bieli daje około 4,48:1 i nie spełnia AA dla zwykłego tekstu, choć wygląda na „4,5”. To narzędzie obcina wyświetlaną wartość do dwóch miejsc po przecinku, więc widzisz dokładnie to, co sprawdza WCAG.

Jeśli kolor tekstu jest półprzezroczysty (np. rgb(0 0 0 / 60%)), najpierw jest nakładany na tło, tak jak narysowałaby go przeglądarka. Przezroczystość koloru tła jest pomijana, bo nie wiadomo, co leży pod stroną.

Poziomy WCAG w skrócie

Treść	AA	AAA
Zwykły tekst	4,5:1	7:1
Duży tekst (24 px lub 18,66 px pogrubiony)	3:1	4,5:1
Komponenty interfejsu i istotna grafika	3:1	–

„Duży tekst” oznacza co najmniej 18 pt (24 piksele CSS) albo 14 pt pogrubione (około 18,66 px). Logotypy i tekst czysto dekoracyjny nie mają wymagań. Zasada 3:1 dla komponentów interfejsu (kryterium sukcesu 1.4.11) dotyczy obramowań pól i przycisków, wskaźników fokusu, ikon oraz linii wykresów, które użytkownik musi widzieć.

Jak działają propozycje

Proponowane kolory zachowują odcień i nasycenie (chromę) twojego koloru w przestrzeni OKLCH i zmieniają tylko jasność – w stronę ciemniejszą lub jaśniejszą – aż do osiągnięcia docelowego współczynnika. Następnie narzędzie wybiera ten z dwóch kierunków, który jest wizualnie bliższy oryginałowi, mierząc odległość w OKLab. Wynik jest sprawdzany ponownie po zaokrągleniu do kodu HEX, więc naprawdę spełnia wymaganie. Jeśli żadna jasność nie pozwala osiągnąć celu (np. 7:1 na średniej szarości), narzędzie o tym informuje.

APCA

APCA (Accessible Perceptual Contrast Algorithm) to nowszy model kontrastu rozważany dla przyszłej wersji WCAG 3. Uwzględnia grubość i rozmiar czcionki oraz polaryzację (ciemne na jasnym kontra jasne na ciemnym). Wciąż jest to wersja robocza, a nie wymóg prawny czy normatywny, dlatego to narzędzie podaje wyniki WCAG 2.x, które pozostają punktem odniesienia dla europejskiej normy dostępności EN 301 549, amerykańskiej Section 508 i większości przepisów, w tym polskiej ustawy o dostępności cyfrowej.

Najczęściej zadawane pytania

Jakiego kontrastu potrzebuje tekst główny?

Co najmniej 4,5:1 na poziomie AA, którego wymaga większość przepisów i polityk. Przy długiej lekturze lub dla osób słabowidzących celuj w 7:1 (AAA).

Czy biały tekst na kolorze mojej marki spełnia wymagania?

Wpisz biel jako kolor tekstu, a kolor marki jako tło. Wiele średnio nasyconych niebieskich, pomarańczowych i zielonych osiąga tylko 3:1: wystarcza to dla dużych nagłówków i przycisków z dużymi etykietami, ale nie dla drobnego tekstu. Jeśli potrzebujesz AA dla zwykłego tekstu, użyj proponowanego koloru tła.

Dlaczego kolejność kolorów nie zmienia współczynnika?

Wzór zawsze dzieli luminancję jaśniejszą przez ciemniejszą, więc ciemne na jasnym i jasne na ciemnym dają ten sam współczynnik. Odczuwany kontrast może się jednak nieco różnić – to jeden z problemów, które próbuje rozwiązać APCA.

Czy 4,49:1 to wystarczająco blisko?

Nie. Progi WCAG to ścisłe minima: 4,49:1 nie spełnia AA dla zwykłego tekstu. Skorzystaj z propozycji, aby uzyskać kolor, który faktycznie spełnia wymaganie.

Czy narzędzie sprawdza się dla tekstu zastępczego (placeholder) lub nieaktywnego?

Tekst zastępczy musi spełniać to samo minimum 4,5:1, jeśli przekazuje informację. Nieaktywne kontrolki są zwolnione z wymagań kontrastu, ale czytelne stany nieaktywne nadal pomagają użytkownikom.