Jak działa Tester kontrastu
Narzędzie „Tester kontrastu” umożliwia wprowadzenie koloru tekstu oraz koloru tła w celu określenia ich współczynnika kontrastu zgodnie ze standardami WCAG 2.1 / 2.2. Na tej podstawie wskazuje ono, które poziomy dostępności (AA i AAA) spełnia wprowadzona kombinacja kolorów dla zwykłego tekstu, dużego tekstu oraz elementów interfejsu użytkownika.
Początkowe wartości kolorów w narzędziu to #4f46e5 dla tekstu oraz #ffffff dla tła, co daje współczynnik kontrastu na poziomie 6.29.
Wprowadzane dane i obsługiwane formaty
Aby skorzystać z narzędzia, należy zdefiniować dwa parametry wejściowe:
- Kolor tekstu (etykieta: Kolor tekstu).
- Kolor tła (etykieta: Kolor tła).
Oba pola akceptują następujące formaty zapisu kolorów:
- Kody Hex (np.
#1a1a1a), - Wartości
rgb()(np.rgb(26, 26, 26)), - Wartości
hsl().
Narzędzie wyposażone jest również w przycisk zamiany (etykieta: Zamień kolor tekstu i tła), który pozwala szybko odwrócić wprowadzone kolory tekstu i tła.
W przypadku wprowadzenia niepoprawnego formatu danych, narzędzie wyświetli odpowiednie komunikaty o błędach:
- Dla nieprawidłowego koloru tekstu: „Wprowadź poprawny kolor tekstu, np. #1a1a1a lub rgb(26, 26, 26).”.
- Dla nieprawidłowego koloru tła: „Wprowadź poprawny kolor tła, np. #ffffff lub rgb(255, 255, 255).”.
Interpretacja wyników i współczynnika kontrastu
Współczynnik kontrastu obliczany przez narzędzie mieści się w przedziale od 1:1 (oznaczającym całkowity brak kontrastu) do 21:1 (reprezentującym maksymalny kontrast, np. czarny tekst na białym tle). Wynik ten prezentowany jest jako stosunek „X:1” pod etykietą Współczynnik kontrastu.
Dla poszczególnych kategorii tekstowych i graficznych narzędzie weryfikuje zgodność z normami, wyświetlając status „Zgodny” lub „Brak zgodności”:
- Zwykły tekst: Testowany pod kątem poziomów AA i AAA. Poziom AA wymaga współczynnika co najmniej 4.5:1, natomiast poziom AAA wymaga stosunku minimum 7:1.
- Duży tekst: Testowany pod kątem poziomów AA i AAA. Duży tekst definiowany jest jako tekst o rozmiarze od 18pt (około 24px) lub od 14pt (około 18.5px) w przypadku zastosowania pogrubienia. Poziom AA dla dużego tekstu wymaga współczynnika co najmniej 3:1, a poziom AAA – co najmniej 4.5:1.
- Interfejs i grafika: Ta kategoria weryfikuje elementy interfejsu oraz komponenty graficzne pod kątem jednego progu wynoszącego minimum 3:1. W tym wierszu nie występuje rozróżnienie na poziomy AA i AAA – narzędzie prezentuje dla niego tylko jeden, pojedynczy wynik.
Na podstawie uzyskanych wyników narzędzie generuje podsumowujący werdykt określający najwyższy zaliczony poziom dostępności:
- „Zgodny z AA i AAA dla zwykłego tekstu.”
- „Zgodny z AA dla zwykłego tekstu.”
- „Zgodny z AA tylko dla dużego tekstu.”
- „Poniżej minimum AA — zwiększ kontrast.”
Odbiorcy narzędzia i standardy dostępności
Narzędzie opiera swoje obliczenia na wzorach matematycznych zdefiniowanych w standardach WCAG 2.1 / 2.2, które stanowią aktualny punkt odniesienia dla audytów i wymogów dostępności cyfrowej. Z testera korzystają przede wszystkim:
- Projektanci, którzy weryfikują czytelność tekstów oraz projektowanych komponentów.
- Programiści, dbający o spełnienie formalnych standardów dostępności w tworzonym kodzie.
- Zespoły odpowiedzialne za treści, które sprawdzają kontrast kolorów w przygotowywanych materiałach.
Prywatność i przetwarzanie danych
Każda weryfikacja kontrastu odbywa się bezpośrednio w Państwa przeglądarce internetowej. Żadne wprowadzane przez Państwa dane nie są przesyłane do serwerów BroBroGo.
Często zadawane pytania (FAQ)
Co oznaczają wyniki AA i AAA? AA to poziom, do którego dąży większość stron internetowych: wymaga współczynnika co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Poziom AAA jest bardziej rygorystyczny — wymaga odpowiednio 7:1 oraz 4.5:1. Współczynnik kontrastu mieści się w przedziale od 1:1 (brak kontrastu) do 21:1 (czarny na białym).
Co kwalifikuje się jako duży tekst? Tekst o rozmiarze od 18pt (około 24px) lub od 14pt (około 18.5px) w przypadku pogrubienia. Większy tekst pozostaje czytelny przy niższym kontraście, dlatego zalicza poziom AA przy stosunku 3:1, a AAA przy 4.5:1 (zamiast bardziej rygorystycznych progów dla zwykłego tekstu).
Jakie formaty kolorów mogę wprowadzać? Można wpisać kod hex (np. #1a1a1a), wartość rgb() (np. rgb(26, 26, 26)) lub hsl() — bądź kliknąć próbnik, aby wybrać kolor wizualnie. Przycisk zamiany pozwala szybko zamienić miejscami kolor tekstu i tła.
Czy narzędzie korzysta z WCAG 2, czy z nowszej metody APCA? Narzędzie korzysta ze wzorów WCAG 2.1 / 2.2, na których opierają się współczesne audyty i wymogi dostępności. APCA to nowsza metoda oparta na percepcji, opracowywana dla standardu WCAG 3 — jest obiecująca, ale nie stanowi jeszcze obowiązującej normy prawnej, dlatego wyniki testów tutaj jej nie uwzględniają.