Sprawdzanie kontrastu WCAG
Sprawdzanie współczynników kontrastu kolorów pod kątem zgodności z wymogami dostępności WCAG AA i AAA
Dane wejściowe i opcje
Szybkie ustawienia i przykłady
Działa w przeglądarce. Wprowadzone dane pozostają na tym urządzeniu.
Wyniki
Aby zobaczyć wynik, należy wprowadzić wartości.
O narzędziu do sprawdzania kontrastu WCAG
Nasze darmowe narzędzie online do sprawdzania kontrastu WCAG pomaga projektantom, programistom i specjalistom ds. dostępności zweryfikować, czy kombinacje kolorów tekstu i tła spełniają wymagania kontrastu Web Content Accessibility Guidelines (WCAG) 2.1. Dostępny kontrast kolorów sprawia, że wszyscy użytkownicy, także osoby z osłabionym wzrokiem lub zaburzeniami widzenia barw, mogą czytać treści internetowe i z nich korzystać.
Narzędzie oblicza współczynnik kontrastu między dowolnymi dwoma kolorami według oficjalnego wzoru W3C na luminancję względną i natychmiast pokazuje, czy kombinacja spełnia poziomy zgodności WCAG AA i WCAG AAA dla tekstu zwykłego i dużego. Wszystkie obliczenia są wykonywane w czasie rzeczywistym bezpośrednio w przeglądarce, bez wysyłania danych na serwer.
Niezależnie od tego, czy prowadzony jest audyt dostępności, projektowany nowy interfejs, czy sprawdzana jest zgodność istniejących treści, to narzędzie daje precyzyjne wyniki zgodne ze standardami, podgląd tekstu na żywo oraz praktyczne podpowiedzi, jak poprawić niespełniające wymagań kombinacje kolorów.
Wymagania kontrastu WCAG
Standard Web Content Accessibility Guidelines (WCAG) jest międzynarodowo uznanym wzorcem dostępności stron internetowych, publikowanym przez World Wide Web Consortium (W3C). WCAG określa konkretne progi współczynnika kontrastu, które zapewniają czytelność tekstu dla użytkowników o różnych możliwościach widzenia.
- WCAG poziom AA (tekst zwykły): Wymagany jest minimalny współczynnik kontrastu 4.5:1. Dotyczy to tekstu podstawowego, akapitów i każdego tekstu mniejszego niż 18pt (24px) lub 14pt pogrubionego (18.66px pogrubionego).
- WCAG poziom AA (tekst duży): Wymagany jest minimalny współczynnik kontrastu 3:1. Za duży tekst uznaje się tekst o rozmiarze co najmniej 18pt (24px) lub 14pt pogrubiony (18.66px pogrubiony).
- WCAG poziom AAA (tekst zwykły): Wymagany jest minimalny współczynnik kontrastu 7:1. To najwyższy poziom zgodności z wymogami dostępności dla tekstu o normalnym rozmiarze.
- WCAG poziom AAA (tekst duży): Dla dużego tekstu na poziomie zgodności AAA wymagany jest minimalny współczynnik kontrastu 4.5:1.
Spełnienie co najmniej poziomu WCAG AA uznaje się za podstawowy standard dostępnego projektowania stron i wymagają go liczne regulacje prawne na świecie, m.in. Americans with Disabilities Act (ADA), European Accessibility Act oraz Section 508 ustawy Rehabilitation Act. WCAG AAA zapewnia wyższy poziom dostępności, zalecany tam, gdzie jest to możliwe.
Jak oblicza się współczynnik kontrastu
Współczynnik kontrastu między dwoma kolorami ustala się na podstawie luminancji względnej każdego koloru, zgodnie ze specyfikacją WCAG 2.1. Luminancja względna mierzy postrzeganą jasność koloru w skali od 0 (najciemniejsza czerń) do 1 (najjaśniejsza biel).
Obliczenie składa się z trzech kroków. Najpierw każdy kanał koloru (czerwony, zielony, niebieski) jest przeliczany z 8-bitowej wartości sRGB (0-255) na znormalizowaną wartość sRGB (0-1) przez podzielenie przez 255. Następnie każda znormalizowana wartość podlega korekcji gamma: jeśli wynosi 0.04045 lub mniej, dzieli się ją przez 12.92, w przeciwnym razie przekształca według wzoru ((value + 0.055) / 1.055) ^ 2.4. Na końcu zlinearyzowane wartości kanałów łączy się ze współczynnikami wagowymi: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Końcowy współczynnik kontrastu wylicza się jako (L1 + 0.05) / (L2 + 0.05), gdzie L1 to luminancja względna jaśniejszego koloru, a L2 to luminancja względna ciemniejszego koloru. Wynik mieści się w zakresie od 1:1 (brak kontrastu, identyczne kolory) do 21:1 (maksymalny kontrast, czysta czerń na czystej bieli).
Najważniejsze funkcje
- Obliczanie współczynnika kontrastu w czasie rzeczywistym według oficjalnego wzoru luminancji W3C WCAG 2.1
- Wskaźniki spełnia/nie spełnia dla poziomów zgodności WCAG AA i AAA, dla tekstu zwykłego i dużego
- Interaktywny selektor kolorów i pole hex dla koloru pierwszego planu i tła
- Zamiana kolorów jednym kliknięciem, do testowania odwróconych kombinacji
- Dziesięć gotowych kombinacji kolorów, w tym popularne dostępne zestawienia
- Podgląd tekstu na żywo, pokazujący wygląd kolorów w normalnym i dużym rozmiarze
- Automatyczna sugestia najbliższego spełniającego wymagania koloru pierwszego planu, gdy obecna kombinacja ich nie spełnia
- Techniczne szczegóły luminancji dla koloru pierwszego planu i tła
- Pełna obsługa trybu ciemnego dla wygodnej pracy w każdym otoczeniu
- Całe przetwarzanie odbywa się lokalnie w przeglądarce, bez przesyłania danych na zewnętrzne serwery
Jak korzystać z narzędzia do sprawdzania kontrastu WCAG
- Ustaw kolor pierwszego planu: Kliknij kwadrat selektora kolorów lub wpisz wartość hex (np. #1A1A2E) w polu tekstowym, aby ustawić kolor tekstu, czyli pierwszego planu.
- Ustaw kolor tła: Podobnie użyj selektora kolorów lub pola hex, aby ustawić kolor tła za tekstem.
- Przejrzyj wyniki: Współczynnik kontrastu i wyniki spełnia/nie spełnia dla wszystkich czterech poziomów WCAG wyświetlają się natychmiast po zmianie kolorów.
- Sprawdź podgląd na żywo: Przewiń w dół, aby zobaczyć rzeczywisty tekst w wybranej kombinacji kolorów, w rozmiarze normalnym i dużym.
- Zastosuj sugestie: Jeśli kombinacja nie spełnia WCAG AA, wyświetlany jest sugerowany kolor pierwszego planu. Kliknij Zastosuj, aby go użyć.
- Wypróbuj gotowe zestawy: Użyj szybkich zestawów, aby przetestować znane dostępne lub niedostępne kombinacje kolorów.
- Zamień kolory: Kliknij przycisk Zamień kolory, aby odwrócić wybór koloru pierwszego planu i tła.
Dlaczego kontrast kolorów ma znaczenie dla dostępności
Około 1 na 12 mężczyzn i 1 na 200 kobiet na świecie ma jakąś postać zaburzeń widzenia barw. Ponadto miliony osób doświadczają słabego wzroku, zmian wzroku związanych z wiekiem lub przejściowych utrudnień, takich jak odblaski na ekranie. Odpowiedni kontrast kolorów to jeden z najskuteczniejszych i najprostszych sposobów, by treści internetowe były dostępne dla wszystkich tych użytkowników.
Słaby kontrast między tekstem a tłem to jeden z najczęstszych problemów z dostępnością wykrywanych w audytach stron. Korzystając z narzędzia do sprawdzania kontrastu WCAG podczas projektowania i tworzenia, zespoły mogą wykryć i naprawić problemy z kontrastem, zanim trafią na produkcję, co obniża koszty poprawek i od początku zapewnia zgodność z przepisami o dostępności.
Dobry kontrast kolorów pomaga także osobom bez niepełnosprawności. Poprawia czytelność w jasnym słońcu, na wyświetlaczach niskiej jakości i w środowiskach pełnych rozpraszaczy. Dostępne projektowanie to projektowanie inkluzywne, które zapewnia lepsze doświadczenie wszystkim.
Najczęściej zadawane pytania
Czym różni się WCAG AA od AAA?
WCAG AA to standardowy poziom zgodności zalecany dla większości stron i aplikacji. Wymaga minimalnego współczynnika kontrastu 4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego. WCAG AAA to bardziej rygorystyczny poziom, który wymaga 7:1 dla tekstu zwykłego i 4.5:1 dla tekstu dużego. Choć AAA nie zawsze jest osiągalny dla wszystkich treści, zaleca się go dla kluczowych elementów tekstowych i tam, gdzie potrzebna jest maksymalna czytelność.
Co w WCAG uznaje się za duży tekst?
Według WCAG 2.1 za duży tekst uznaje się tekst o rozmiarze co najmniej 18 punktów (około 24 pikseli CSS) lub 14 punktów (około 18.66 piksela CSS) w przypadku pogrubienia. Duży tekst ma niższe wymagania kontrastu, ponieważ już sam jego rozmiar ułatwia czytanie.
Czy narzędzie obsługuje przezroczystość lub kanały alfa?
Narzędzie działa z nieprzezroczystymi kolorami hex (6-cyfrowe kody hex). W przypadku kolorów z przezroczystością efektywny kontrast zależy od tła za przezroczystą warstwą, które może się różnić na stronie. Aby sprawdzić półprzezroczysty tekst, należy najpierw obliczyć efektywny kolor płaski powstający z nałożenia przezroczystej warstwy na rzeczywiste tło, a następnie przetestować ten kolor tutaj.
Czy zgodność z WCAG jest wymagana prawem?
W wielu jurysdykcjach tak. ADA w Stanach Zjednoczonych, European Accessibility Act w UE, Accessibility for Ontarians with Disabilities Act (AODA) w Kanadzie i podobne przepisy w innych krajach odwołują się do WCAG 2.1 poziomu AA jako standardu dostępności cyfrowej lub go włączają. Organizacje, które nie spełniają tych wymagań, mogą ponieść konsekwencje prawne, kary finansowe i utratę reputacji.