# Sprawdzanie kontrastu kolorów

Sprawdź kontrast między kolorem tekstu a kolorem tła według WCAG 2 i APCA. Narzędzie oblicza współczynnik kontrastu WCAG 2 na podstawie względnej luminancji, informuje, czy spełnione są kryteria AA i AAA dla tekstu zwykłego i dużego oraz dla UI grafik, a także podaje wartość kontrastu jasności APCA wraz ze wskazówkami, do czego się przydaje. Przydatne projektantom i programistom tworzącym dostępne interfejsy.

## Najczęściej zadawane pytania

### Co oznaczają poziomy WCAG?

Poziom AA wymaga 4.5:1 dla tekstu zwykłego i 3:1 dla dużego tekstu (kryterium sukcesu 1.4.3); poziom AAA wymaga 7:1 i 4.5:1 (1.4.6). Elementy interfejsu użytkownika i znaczące grafiki muszą mieć 3:1 względem sąsiadujących kolorów (1.4.11). Narzędzie informuje, czy spełniony jest każdy z tych pięciu progów.

### Co uznaje się za duży tekst?

WCAG definiuje duży tekst jako tekst o rozmiarze co najmniej 18 punktów w odmianie zwykłej, czyli około 24 CSS pikseli, lub co najmniej 14 punktów w odmianie pogrubionej, czyli około 18.66 CSS pikseli. Mniejszy tekst uznaje się za zwykły i wymaga on wyższego współczynnika.

### Dlaczego współczynnik 4.499:1 nie spełnia poziomu AA?

Progi WCAG są dokładne, więc współczynnik, który po zaokrągleniu wyniósłby 4.5, ale jest od tej wartości niższy, nie spełnia wymagań. Narzędzie porównuje niezaokrąglony współczynnik i wyświetla go z dokładnością do dwóch miejsc po przecinku, dzięki czemu widoczna wartość nigdy nie wygląda lepiej niż rzeczywista.

### Czym jest APCA?

Accessible Perceptual Contrast Algorithm to metoda pomiaru kontrastu opracowana na potrzeby projektów WCAG 3. Modeluje postrzegany kontrast jasności, inaczej traktuje tekst i tło, a jej wynikiem jest wartość kontrastu jasności Lc z zakresu około od -108 do 106. Metoda nie jest jeszcze częścią żadnego opublikowanego standardu WCAG, dlatego przy ocenie zgodności korzystaj z wyników WCAG 2, a APCA traktuj jako dodatkową kontrolę.

### Dlaczego wartość APCA jest czasem ujemna?

APCA uwzględnia polaryzację: wartości dodatnie oznaczają ciemny tekst na jasnym tle, a ujemne — jasny tekst na ciemnym tle. Wskazówki opierają się na wartości bezwzględnej, więc Lc -75 i Lc 75 należą do tego samego poziomu.

### Jak ustalane są poziomy wskazówek APCA?

Opierają się na prostym trybie bronze APCA: Lc 90 jest zalecane dla tekstu głównego, Lc 75 to minimum dla tekstu głównego, Lc 60 — dla pozostałego tekstu, Lc 45 — dla nagłówków i dużego tekstu, Lc 30 — dla tekstu czytelnego przy krótkim spojrzeniu, takiego jak tekst zastępczy, a Lc 15 — dla elementów nietekstowych. Nadal liczą się rozmiar i grubość czcionki, dlatego traktuj te poziomy jako punkt wyjścia, a nie ostateczną ocenę.

### Która wersja APCA jest zaimplementowana?

Zastosowano stałe APCA-W3 w wersji 0.0.98 G, rewizja 4g, z prostym wykładnikiem 2.4 dla kanałów sRGB, łagodnym ograniczeniem czerni i obcięciem niskiego kontrastu. Czarny tekst na białym tle daje około Lc 106.0, a biały tekst na czarnym — około Lc -107.9, zgodnie z implementacją referencyjną.

### Jakich formatów kolorów mogę użyć?

Kody szesnastkowe z # lub bez, CSS nazwy kolorów, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), przestrzenie color(), takie jak display-p3, oraz cmyk(). Kolory spoza sRGB są najpierw odwzorowywane w sRGB, ponieważ oba wzory zdefiniowano dla kolorów wyświetlanych na ekranie w sRGB.

### Jak obsługiwane są kolory przezroczyste?

Półprzezroczysty kolor tekstu jest mieszany z kolorem tła przed pomiarem, tak jak renderuje go przeglądarka. Półprzezroczyste tło jest najpierw mieszane z bielą. Wynik zawiera nieprzezroczyste kolory tekstu i tła, które faktycznie porównano.

### Czy kolejność dwóch kolorów ma znaczenie?

W przypadku WCAG 2 nie, ponieważ stosunek jaśniejszej do ciemniejszej luminancji jest taki sam niezależnie od kolejności. W przypadku APCA ma to znaczenie, ponieważ tekst i tło mają różne wagi, dlatego wpisz kolor tekstu w pierwszym polu, a kolor tła w drugim.

Twoja reklama tutaj?

[Napisz do nas](mailto:hi@dennn.is?subject=Reklama%20w%20OneClick%20Pro)

[Reklama Pakiet wtyczek gotowy do pracy z agentami dla WordPress.](https://sleekwp.com/?ref=oneclickpro)