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.