Wróć do wszystkich kryteriów

2.3.1 Trzy błyski lub wartości poniżej progu (ang.) Three Flashes or Below Threshold

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Multimedia

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    To kryterium pełni funkcję swoistego „bezpiecznika” zdrowotnego w świecie cyfrowym. Jego głównym celem jest ochrona użytkowników przed treściami, które mogą wywołać napady drgawek, migreny lub ataki epilepsji fotowrażliwej.

    Zastosuj zasadę ograniczenia intensywnych bodźców wizualnych, aby surfowanie po sieci nie wiązało się z ryzykiem utraty zdrowia. Realizacja tej wytycznej polega na projektowaniu takich animacji i efektów wideo, które nie migoczą gwałtownie w krótkim czasie.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#trzy-b-yski-lub-wartosci-ponizej-progu

    Słownik pojęć

    Miganie/Błyskanie (ang.) Flash
    –

    gwałtowna sekwencja zmian jasności lub barwy (przejście od stanu ciemnego do jasnego i powrót do ciemnego), która działa na układ nerwowy jak szybki stroboskop. Wykazywana jest w postaci skoków względnej luminancji występujących częściej niż 3 razy w ciągu sekundy (powyżej 3 Hz). Stwarza bezpośrednie zagrożenie zdrowia i życia, ponieważ wywołuje natychmiastowy napad padaczki fotoczułej, zanim użytkownik zdąży w jakikolwiek sposób zareagować lub wyłączyć element.

    Mruganie (ang.) Blinking
    –

    powolne przełączanie się elementu między dwoma stanami wizualnymi (np. zmiana koloru przycisku, pulsujący kursor lub znikająca ikona), którego celem jest przyciągnięcie uwagi użytkownika. Zachodzi wolno – poniżej 3 razy na sekundę (poniżej 3 Hz). Nie stwarza zagrożenia neurologicznego, lecz wywołuje rozproszenie uwagi i irytację. Pamiętaj: jeśli mruganie przyspieszy i przekroczy granicę 3 cykli na sekundę, automatycznie staje się niebezpiecznym błyskiem ((ang.) Flash) i podlega pod rygorystyczne zakazy kryterium 2.3.1 oraz 2.3.2.

    Jasność względna (ang.) Relative luminance
    –

    Jasność punktu znormalizowana do wartości od 0 (czarny) do 1 (biały).

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby z epilepsją fotowrażliwą: To grupa najbardziej narażona na bezpośrednie zagrożenie życia i zdrowia. Nawet krótka ekspozycja na błyski o częstotliwości od 3 do 60 Hz może u nich wywołać atak padaczki.
    • Osoby z zaburzeniami neurologicznymi: Wspierasz osoby doświadczające migren, zawrotów głowy czy nudności pod wpływem intensywnych bodźców.
    • Ogół użytkowników: Unikanie agresywnych animacji zmniejsza zmęczenie wzroku i pozwala na lepszą koncentrację na czytanej treści.

    Szybkie migotanie lub błyski na ekranie mogą być niebezpieczne, a nawet śmiertelne, dla osób cierpiących na epilepsję fotowrażliwą. Tego typu bodźce wizualne mogą wywoływać ataki padaczki, które mogą prowadzić do urazów fizycznych lub innych poważnych komplikacji. Nawet dla osób bez zdiagnozowanych schorzeń neurologicznych, intensywne i szybkie migotanie może powodować dyskomfort, bóle głowy, dezorientację, a także zmęczenie wzroku.

    Zasady wdrażania i wymagania techniczne

    Strona nie może zawierać elementów błyskających częściej niż 3 razy w ciągu sekundy, chyba że błysk mieści się poniżej progów bezpieczeństwa.

    Gdzie leży granica bezpieczeństwa? (Techniczne progi)

    Aby precyzyjnie ocenić, czy animacja na Twojej stronie jest bezpieczna, musimy posłużyć się konkretnymi miarami. Wyobraź sobie standardowy punkt odniesienia:

    1. Ekran wzorcowy Wszystkie obliczenia opieramy na rozdzielczości 1024 x 768 pikseli. To nasz fundament audytowy, który pozwala zachować spójność wyników na różnych urządzeniach.
    2. Pole widzenia 10 stopni To obszar, w którym ludzkie oko jest najbardziej wrażliwe na bodźce. Na naszym wzorcowym ekranie odpowiada on prostokątowi o wymiarach 341 x 256 px CSS.
    3. Zasada 25% (Limit powierzchni) Jeśli Twój element musi błyskać częściej niż 3 razy na sekundę, nie może on zdominować wzroku użytkownika. Musi pozostać mały. Łączna powierzchnia wszystkich migających elementów (niezależnie od ich kształtu) nie może przekraczać 21 824 pikseli kwadratowych. To obszar odpowiadający kwadratowi o wymiarach około 148 x 148 px CSS lub prostokątowi 170 x 128 px CSS. Jest to wielkość zbliżona do standardowego zdjęcia profilowego w social media. To zaledwie 1/4 wspomnianego wyżej pola widzenia 10 stopni. Jeśli przekroczysz tę wartość przy szybkim migotaniu, ryzykujesz zdrowiem odbiorcy.

    Progi krytyczne dla kolorów i nowoczesnych ekranów

    Nie każdy błysk jest taki sam. Niektóre parametry są szczególnie ryzykowne dla układu nerwowego:

    Próg czerwonego błysku ((ang.) Red flash threshold)

    Nasycona czerwień jest dla mózgu znacznie bardziej agresywna niż inne barwy. Według najnowszych wytycznych, błyski są uznawane za niebezpieczne, gdy:

    • Czerwień dominuje w składzie koloru (wartość R/(R+G+B) wynosi 0,8 lub więcej).
    • Różnica między stanami nasycenia jest wyraźna (przekracza 0,2 w specjalistycznym układzie CIE 1976 UCS).

    Treści HDR (Wysoka dynamika jasności)

    Na nowoczesnych, bardzo jasnych ekranach, nawet niewielka zmiana może być bolesna. Jeśli ciemniejszy stan obrazu przekracza 160 cd/m², musisz zachować szczególny rygor:

    • Stosujemy wtedy tzw. kontrast Michelsona (różnica jasności podzielona przez ich sumę).
    • Wartość ta musi być mniejsza niż 1/17.
    Czym jest „kontrast Michelsona < 1/17” w praktyce?

    Dla większości programistów i audytorów zapis 1/17 brzmi jak czysta abstrakcja. Przełóżmy ten wzór na prostą zasadę i konkretne liczby.

    Wzór na kontrast Michelson wygląda następująco:

    CM=LHigh−LLowLHigh+LLow<117C_M = \frac{L_{High} – L_{Low}}{L_{High} + L_{Low}} < \frac{1}{17}

    Gdzie:

    • LHighL_{High} to jasność rozbłysku,
    • LLowL_{Low} to jasność tła.
    Złota zasada: Reguła 12,5%

    Z czystej matematyki tego wzoru wynika jedna, genialna reguła kciuka: jaśniejszy stan obrazu może być silniejszy od stanu ciemniejszego o maksymalnie 12,5% (stosunek jasności wynosi dokładnie 9:8).

    Jeśli zmiana jasności przekroczy te 12,5%, algorytm kwalifikuje to jako niebezpieczny błysk.

    Przykład liczbowy (Zobacz, jak mała to różnica):

    Załóżmy, że na nowoczesnym monitorze (ang.) HDR wyświetlasz nocną scenę, w której ciemne tło ma jasność 160 cd/m² (wartość graniczna dla ekranów o wysokiej dynamice).

    • Maksymalny bezpieczny rozbłysk: Może wynieść zaledwie 180 cd/m² (160 x 1,125 = 180).
    • Różnica: To zaledwie 20 jednostek (nitów)!

    Dlaczego to takie surowe? Ekrany HDR potrafią świecić z potężną mocą (nawet ponad 1000–2000 cd/m²). Gdy ludzkie oko adaptuje się do bardzo jasnego ekranu, nawet minimalny skok strumienia światła jest dla siatkówki jak uderzenie obuchem. Dlatego WCAG na ekranach HDR pozwala jedynie na mikroskopijne, ledwo zauważalne wahania jasności w dynamicznych scenach.

    Wskazówka: Jeśli masz wątpliwości, czy Twoja animacja nie jest zbyt intensywna – zmniejsz jej rozmiar lub spowolnij tempo zmian. Bezpieczeństwo jest ważniejsze niż efektowny rozbłysk.

    Wyjątki i sytuacje szczególne

    • Drobne wzorce: Migotanie będące drobnym, zrównoważonym wzorcem (np. biały szum lub szachownica o elementach mniejszych niż 0,1 stopnia pola widzenia) nie narusza progów.

    Przykłady implementacji

    Najczęstsze błędy

    • Stosowanie banerów reklamowych, które drastycznie zmieniają kolory w pętli szybszej niż 300 ms.
    • Używanie skryptów JavaScript do tworzenia efektu „stroboskopu” przy powiadomieniach o błędach w formularzach.
    • Publikowanie materiałów wideo z nagłymi rozbłyskami światła (np. zdjęcia z fleszami aparatów) bez wcześniejszej analizy technicznej.
    • Brak mechanizmów kontroli, takich jak przycisk pauzy lub zatrzymania, przy dynamicznych elementach dekoracyjnych.
    • Stosowanie zapętlonych animacji (np. GIF), które podczas odtwarzania w pętli generują serię błysków przekraczającą limit.

    Najlepsze praktyki

    • Analiza narzędziem (ang.) PEAT: Zawsze testuj materiały wideo przy użyciu (ang.) Photosensitive Epilepsy Analysis Tool przed publikacją.
    • Unikanie nasyconej czerwieni: Staraj się nie używać czystej czerwieni w żadnych elementach dynamicznych.
    • Płynne przejścia: Stosuj płynne przejścia typu (ang.) Fade-in oraz (ang.) Fade-out zamiast natychmiastowych zmian stanów widoczności.
    • Weryfikacja treści pochodzących z zewnątrz: Regularnie weryfikuj treści pochodzące z zewnątrz (np. reklamy od dostawców trzecich), aby upewnić się, że nie wprowadzają one niebezpiecznego migotania poza Twoją kontrolą.
    • Czytelne ostrzeżenie: Jeśli wideo zawiera ryzykowne sceny, umieść przed nim wyraźne ostrzeżenie tekstowe i pozwól użytkownikowi zdecydować, czy chce je uruchomić.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Przeanalizuj oś czasu animacji CSS lub skryptów JS, aby obliczyć czas trwania cyklu zmiany jasności. Upewnij się, że pełny cykl (on/off) trwa odpowiednio długo, by nie przekroczyć 3 błysków na sekundę.
    • Testowanie manualne: Zwróć uwagę na wszelkie elementy poruszające się lub zmieniające kolor. Jeśli odnosisz wrażenie, że migotanie jest męczące lub zbyt szybkie, prawdopodobnie wymaga korekty.
    • (ang.) Photosensitive Epilepsy Analysis Tool: Wykorzystaj to bezpłatne narzędzie do profesjonalnej analizy materiałów wideo i złożonych animacji klatka po klatce.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 interaktywnych animacji. Twoim zadaniem jest ocenić, czy dany element narusza kryterium i stanowi zagrożenie (wywołując atak epilepsji).

    Jak to sprawdzić?

    1. Częstotliwość – czy element błyska częściej niż 3 razy w ciągu sekundy (3 Hz)?
    2. Powierzchnia – czy migający obszar zajmuje dużą część ekranu, czy może jest bardzo mały (tzw. „poniżej progu”)?
    3. Kolor – czy animacja wykorzystuje intensywny czerwony błysk, który jest szczególnie niebezpieczny?

    Wskazówka: Elementy trwające krócej niż 5 sekund nie wymagają przycisku pauzy (choć jest to dobra praktyka).
    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Stoper/Analiza zachowania

    Link: https://pdc.ambiscale.com/training/wcag-2-3-1/

    #1 BŁĄD

    Problem: Element zmienia kontrast (czarny i biały) błyskając ponad 3 razy na sekundę (ok. 6.6 Hz).
    Dlaczego: Duży obszar migotania z wysokim kontrastem przekracza dopuszczalne progi i może wywołać napad padaczki.
    Naprawa: Zmniejsz częstotliwość migania poniżej 3 Hz lub znacznie zmniejsz powierzchnię animacji.

    #2 DOBRZE

    Dlaczego: Pomimo że animacja obejmuje dużą powierzchnię i modyfikuje jasność (fade-in, fade-out), cały cykl trwa 1.5 sekundy, czyli częstotliwość wynosi niecały 1 Hz. Miganie poniżej częstotliwości 3 błysków na sekundę jest dozwolone.

    #3 DOBRZE (WARUNKOWO)

    Dlaczego: Czerwony wskaźnik miga szybciej niż 3 razy na sekundę (ok. 6.6 Hz) – ALE jest na tyle mały, że mieści się poniżej limitu powierzchni pola widzenia (tzw. progu bezpiecznego wynoszącego ok. 21 824 pikseli kwadratowych). Dzięki temu nie stanowi zagrożenia, choć mimo to zaleca się ostrożność przy użyciu koloru czerwonego.

    #4 BŁĄD

    Problem: Agresywny, intensywny czerwony błysk ((ang.) Red flash) z częstotliwością ok. 10 Hz na dużej powierzchni to błąd krytyczny.
    Dlaczego: Nasycona czerwień pulsująca w ten sposób to najbardziej ryzykowny czynnik wyzwalający ataki epilepsji fotowrażliwej. Jest to jedno z najcięższych naruszeń kryteriów dostępności WCAG.
    Naprawa: Usuń całkowicie ten efekt. Użyj statycznego, ostrzegawczego tekstu lub ikony błędu bez włączania efektu stroboskopu.

    #5 BŁĄD

    Problem: Gwałtowna, szybka zmiana kontrastowego wzoru (czarno-żółte paski) z częstotliwością ok. 6.6 Hz.
    Dlaczego: Błysk to nie tylko jednolita zmiana całego tła. Przy odwróceniu kąta pasków (45° na -45°) połowa pikseli w obszarze gwałtownie zmienia jasność (żółty ↔ czarny), co dla siatkówki jest równoznaczne z intensywnym migotaniem. WCAG przewiduje wyjątek dla bardzo drobnych, zrównoważonych wzorców (elementy mniejsze niż 0,1 stopnia pola widzenia), jednak użyte tu pasy o grubości 20px są na to znacznie za duże, przez co łamią próg bezpieczeństwa.
    Naprawa: Zastosuj stabilny, statyczny wzór lub drastycznie spowolnij animację zmiany geometrii (maksymalnie 1-2 zmiany na sekundę).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów