(ang.) WCAG Color contrast checker

WCAG Contrast Checker w formie wtyczki do przeglądarki to wyspecjalizowane narzędzie, które pozwala projektantom, deweloperom i audytorom na szybką i precyzyjną weryfikację współczynnika kontrastu kolorów na dowolnej stronie internetowej. Jego głównym zadaniem jest zapewnienie, że zestawienia kolorystyczne spełniają standardy Web Content Accessibility Guidelines (WCAG), co jest kluczowe dla osób z wadami wzroku, w tym daltonizmem.

Narzędzia te działają najczęściej poprzez mechanizm pipety (eyedropper), który umożliwia pobranie koloru pierwszego planu (np. tekstu) i tła bezpośrednio z ekranu, a następnie natychmiastowe obliczenie współczynnika kontrastu.

Skąd pobrać?

Rozszerzenie jest dostępne w oficjalnych sklepach z rozszerzeniami:

• Google Chrome: Dostępne w Chrome Web Store
  • https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf
• Mozilla Firefox: Dostępne w Firefox Add-ons
  • https://addons.mozilla.org/pl/firefox/addon/wcag-contrast-checker/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
• Microsoft Edge:
  • https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=pl

Wystarczy wyszukać frazę taką jak „WCAG Contrast Checker” w sklepie swojej przeglądarki.

Do konkretnie jakich podpunktów WCAG 2.2 na poziomie AA przydaje się to narzędzie w testowaniu?

Narzędzia do sprawdzania kontrastu koncentrują się na kluczowych kryteriach, które są mierzalne za pomocą algorytmu na podstawie wartości kolorów HEX/RGB:

Nazwa Kryterium	Wymagany Współczynnik Kontrastu (AA)
1.4.3 Kontrast (minimalny) (Contrast (Minimum))	4.5:1 dla normalnego tekstu. 3:1 dla dużego tekstu (min. 18pt lub 14pt pogrubione).
1.4.11 Kontrast elementów nietekstowych (Non-text Contrast)	3:1 dla wizualnych prezentacji komponentów interfejsu użytkownika (np. krawędzie pól formularzy, ramki przycisków, wskaźniki) oraz istotnych elementów graficznych.

Narzędzie automatycznie oblicza stosunek kontrastu i informuje użytkownika, czy dany zestaw kolorów spełnia minimalne wymagania dla poziomu AA (i często również dla wyższego poziomu AAA: 7:1 dla normalnego tekstu).

Jak testować?

Korzystanie z dedykowanej wtyczki do sprawdzania kontrastu jest szybkie i proste:

1. Zainstaluj Wtyczkę: Dodaj wybrane rozszerzenie (np. WCAG Color Contrast Checker) do swojej przeglądarki.
2. Otwórz Stronę: Przejdź na stronę, którą chcesz przetestować.
3. Uruchom Narzędzie: Kliknij ikonę wtyczki (zazwyczaj znajduje się obok paska adresu). Spowoduje to otwarcie małego okna kontrolnego lub panelu bocznego.
4. Pobierz Kolory: Użyj wbudowanej pipety (eyedropper), aby kolejno wybrać:
   • Kolor pierwszego planu (np. czcionki).
   • Kolor tła (za tekstem).
5. Odczytaj Wynik: Narzędzie natychmiast wyświetli obliczony współczynnik kontrastu (np. 5.8:1) oraz status PASS (Zaliczony) lub FAIL (Niezaliczony) dla kryteriów 1.4.3 (normalny i duży tekst) i 1.4.11 (elementy graficzne) na poziomie AA.
6. Korekta: Jeśli kontrast jest niewystarczający (FAIL), wiele takich narzędzi umożliwia ręczną modyfikację kodów HEX/RGB za pomocą suwaków lub podaje sugestie alternatywnych kolorów, które już spełniają wymagania WCAG.