DevToolPal
PL

Sprawdzanie kontrastu kolorów (WCAG)

Sprawdź współczynnik kontrastu WCAG 2.x koloru tekstu i tła, z wynikiem AA i AAA dla zwykłego tekstu, dużego tekstu i interfejsu, podglądem na żywo i najbliższym kolorem spełniającym wymogi.

Działa lokalnie, nic nie jest wysyłane

Kolory

Kolor tekstu
Kolor tła

Kolory przezroczyste są najpierw mieszane: tekst na tle, a tło na bieli.

Podgląd

Duży tekst

Tekst główny powinien być łatwy do przeczytania dla każdego, także dla osób słabowidzących lub przy przyciemnionym ekranie.

Przycisk

Współczynnik kontrastu

—

Najbliższe kolory spełniające wymogi

Do czego służy

Narzędzie do sprawdzania kontrastu mówi, czy kolor tekstu jest czytelny na danym tle według wytycznych WCAG 2.x (Web Content Accessibility Guidelines). Wpisz dowolny kolor CSS dla tekstu i tła — HEX, rgb(), hsl(), nazwę koloru lub kolor przezroczysty — a zobaczysz współczynnik kontrastu, wynik dla każdego kryterium AA i AAA oraz podgląd na żywo. Gdy para nie spełnia wymogów, narzędzie zaproponuje najbliższe kolory tekstu i tła, które je spełniają, w tym samym odcieniu. Wszystko działa w Twojej przeglądarce.

Jak używać

  1. Wpisz lub wybierz Kolor tekstu i Kolor tła. Zamień zamienia je miejscami.
  2. Odczytaj Współczynnik kontrastu i listę wyników dla zwykłego tekstu, dużego tekstu i komponentów interfejsu.
  3. Jeśli któryś poziom nie jest spełniony, zajrzyj do Najbliższe kolory spełniające wymogi: każda propozycja pokazuje nowy kolor, jego współczynnik, przycisk kopiowania i Użyj.
  4. Włącz APCA, aby zobaczyć także kontrast jasności (Lc) ze szkicu WCAG 3.

Kolory półprzezroczyste są mieszane przed sprawdzeniem: tekst na tle, a tło na bieli.

Przykład

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Jak liczony jest współczynnik

Względna luminancja każdego koloru jest liczona z kanałów sRGB (po linearyzacji z wagami 21% czerwieni, 72% zieleni i 7% niebieskiego). Współczynnik to (jaśniejszy + 0,05) / (ciemniejszy + 0,05) i wynosi od 1:1 dla identycznych kolorów do 21:1 dla czerni na bieli. Liczy się tylko jasność, nie odcień: czysta czerwień na czystej zieleni wygląda barwnie, ale daje tylko około 1,3:1.

Propozycje zmieniają wyłącznie jasność koloru (w HSL) i wybierają kierunek — ciemniej lub jaśniej — wymagający mniejszej zmiany. Czasem żaden odcień nie wystarcza: na średnioszarym tle żaden kolor tekstu nie osiąga 7:1.

FAQ

› Jakiego kontrastu potrzebuję?

Poziom AA w WCAG 2.x wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz komponentów interfejsu, takich jak obramowania pól, ikony i obrysy fokusu. Poziom AAA wymaga 7:1 dla zwykłego i 4,5:1 dla dużego tekstu. Większość przepisów i zasad odwołuje się do poziomu AA.

› Co uznaje się za duży tekst?

Tekst o wielkości co najmniej 24px (18pt) przy zwykłej grubości lub co najmniej 18,66px (14pt) pogrubiony. Wszystko mniejsze to zwykły tekst, który wymaga wyższego współczynnika.

› Dlaczego 4,49:1 nie spełnia wymogu?

Progi WCAG są dokładne: współczynnik 4,499 nie osiąga 4,5. Dlatego narzędzie obcina wyświetlany współczynnik zamiast zaokrąglać w górę i ocenia według dokładnej wartości.

› Czym jest APCA?

APCA (Accessible Perceptual Contrast Algorithm) to metoda liczenia kontrastu zaproponowana w szkicu WCAG 3. Daje wartość kontrastu jasności Lc, która zależy od tego, który kolor jest tekstem, i lepiej sprawdza się w trybie ciemnym. Nie jest jeszcze normą prawną, więc pokazujemy ją tylko jako dodatkową wskazówkę.