WCAG 2.3.1: 세 번의 번쩍임 또는 임계값 이하

WCAG 2.3.1은 웹 콘텐츠에 일반적인 또는 빨간색 깜박임 임계값 이하인 경우를 제외하고, 1초에 세 번을 초과하여 깜박이는 요소가 포함되지 않도록 요구합니다. 이 기준은 광과민성 간질이나 유사한 신경학적 상태를 가진 사용자의 발작 및 신체적 반응을 예방하는 데 매우 중요합니다.

이 규칙의 의미

WCAG 2.3.1 — Three Flashes or Below Threshold(3회 이하의 번쩍임 또는 임계값 이하) — 은 Operable(운용 가능) 원칙 아래의 레벨 A 성공 기준이다. 이 기준은 웹 페이지에 1초 동안 3회 이상 번쩍이는 콘텐츠가 포함되어서는 안 된다고 규정한다. 단, 그 번쩍이는 콘텐츠가 충분히 작거나 충분히 어두워서 정의된 일반 번쩍임 임계값 또는 빨간 번쩍임 임계값 아래에 해당하는 경우는 예외이다.

번쩍임(flash)은 발작을 일으킬 수 있는 민감한 사람들에게 영향을 줄 수 있는 상대 휘도의 상반된 변화 쌍으로 정의된다. 구체적으로, WCAG는 두 가지 유형의 위험한 번쩍임을 정의한다.

일반 번쩍임(general flash): 더 높은 휘도가 최대 상대 휘도(0.80)의 최소 10% 이상이고, 휘도 차이가 최대값의 최소 10% 이상인 상반된 변화 쌍이다. 실제로는 밝은 상태와 어두운 상태 사이를 빠르게 반복하여 스트로보스코프 효과를 만들어내는 콘텐츠를 의미한다.
빨간 번쩍임(red flash): 채도가 높은 빨간색이 포함된 상반된 전환 쌍이다. 빨간 번쩍임은 임상적으로 광과민성 발작을 유발할 위험이 더 높은 것으로 알려져 있어 특별히 주의해야 한다.

이 기준은 형식에 관계없이 모든 웹 콘텐츠에 적용된다. HTML 애니메이션, CSS 전환, JavaScript 기반 효과, 임베디드 비디오, GIF, SVG 애니메이션, WebGL 장면, canvas로 렌더링된 그래픽, 서드파티 광고 위젯 등이 모두 포함된다. 콘텐츠가 초당 3회 이상의 속도로 번쩍이면서 휘도 또는 크기 임계값 아래에 해당하지 않는다면, 이 기준을 무조건적으로 위반하게 된다.

콘텐츠가 허용될 수 있는 예외와 임계값: WCAG 2.3.1은 다음 조건 중 하나를 충족하는 경우 번쩍이는 콘텐츠를 허용한다.

동시에 발생하는 번쩍임의 결합 영역이 화면상의 어떤 10도 시야 내에서도 총 0.006 스테라디안(steradian)을 초과하지 않을 것(일반적인 시청 거리에서 대략 341 × 256 픽셀 직사각형, 또는 팔 길이 거리에서 보는 1024픽셀 너비 디스플레이 기준 대략 21,824 제곱 픽셀에 해당).
번쩍임이 일반 번쩍임 임계값(휘도 변화가 10% 미만) 또는 빨간 번쩍임 임계값(채도가 높은 빨간색 성분의 변화가 정의된 임계값을 초과하지 않음) 아래에 있을 것.

따라서 휘도 대비가 매우 낮거나 화면에서 차지하는 영역이 매우 작은 단일 번쩍임 이벤트는 허용될 수 있다. 그러나 이러한 임계값은 미묘하고, 정확한 검증을 위해 광도 측정 도구가 필요하기 때문에, 대부분의 실무자는 초당 3회 이상 번쩍이는 모든 콘텐츠를 단순히 피하는 보수적인 접근을 택한다. 정확히 초당 3회(3 Hz) 번쩍이는 콘텐츠는 경계선에 해당하며, 3 Hz를 초과하는 콘텐츠는 크기나 휘도 임계값을 명확히 충족하지 않는 한 크기와 관계없이 비준수로 간주된다.

이 기준은 정상적인 페이지 상호작용 중에 렌더링되는 모든 콘텐츠를 규율한다. 페이지 로드 시 자동 재생되는 콘텐츠가 사용자 트리거 제어 뒤에 숨겨져 있다고 해서 예외가 되지 않는다. 만약 비디오가 자동으로 재생되기 시작하고 그 안에 임계값을 초과하는 번쩍임 시퀀스가 포함되어 있다면, 페이지는 로드되는 순간부터 이 기준을 위반하게 된다.

왜 중요한가

광과민성 간질은 전 세계적으로 약 4,000명 중 1명, 전체 간질 인구의 대략 3%에 영향을 미친다. 그러나 빠르게 번쩍이거나 깜박이는 빛에 대한 민감성은 임상적 간질에만 국한되지 않는다. 편두통 장애, 전정 기능 장애, 자폐 스펙트럼 상태, 뇌진탕 후 증후군이 있는 많은 사람들은 진단된 발작 장애가 없더라도 빠르게 번쩍이는 시각 자극으로 인해 상당한 불편, 방향 감각 상실, 메스꺼움, 통증을 경험할 수 있다.

이 기준은 대부분의 다른 접근성 요구 사항과 비교했을 때 위험 수준이 유독 높다. 대체 텍스트가 누락된 콘텐츠를 접한 사용자는 배제와 좌절을 경험한다. 반면, 광과민성 발작을 유발하는 콘텐츠를 접한 사용자는 의식을 잃거나 넘어지면서 부상을 입을 수 있고, 드물지만 문서화된 사례에서처럼 생명을 위협하는 결과로 이어질 수도 있는 의료적 응급 상황을 겪을 수 있다. 방송 분야에서 널리 사용되는 도구인 Harding Flash and Pattern Analyzer는 이러한 사건을 TV에서 예방하기 위해 특별히 개발되었으며, 웹 역시 이와 유사한 위험을 내포하고 있다.

구체적인 실제 사례는 이 위험을 잘 보여준다. 자동 재생되는 홍보 비디오에 빠르게 교차하는 밝은 프레임과 어두운 프레임 시퀀스(특정 비디오 압축 방식이나 카메라 플래시 효과에서 흔히 나타나는 현상)가 포함된 뉴스 웹사이트를 생각해 보자. 광과민성 간질이 있는 사용자가 아침 출근길에 모바일 기기로 이 홈페이지를 방문한다. 아무런 경고도, 콘텐츠를 비활성화할 기회도 없이, 사용자는 발작을 유발하는 시퀀스에 노출되고, 대중교통을 이용하는 동안 발작을 겪게 된다. 이 시나리오는 가상의 이야기가 아니다. 일본에서 수백 명의 시청자에게 발작을 유발한 2007년 포켓몬 에피소드 사건과, 웹 기반 광고 유닛과 관련해 문서화된 사례 등 실제 상황에서 발생한 바 있다.

안전 측면을 넘어, 이 기준 준수는 일반 사용자층의 사용성에도 영향을 미친다. 빠르게 번쩍이는 콘텐츠는 열악한 읽기 경험을 만들고, 인지 부하를 증가시키며, 대부분의 디자인 맥락에서 방해적이고 비전문적으로 여겨진다. 이러한 콘텐츠를 제거하면 집중력이 향상되고 이탈률이 감소하며 신뢰성을 높여, 체류 시간과 참여율 같은 SEO 지표에 긍정적으로 기여한다. 또한 검색 엔진 크롤러는 점점 더 Core Web Vitals와 사용자 경험 신호를 순위에 반영하고 있으며, 침습적인 번쩍이는 광고나 애니메이션이 있는 사이트는 간접적으로 불이익을 받을 수 있다.

테스트 방법

모든 동적 콘텐츠 인벤토리 작성: 도구 기반 테스트에 앞서, 페이지에서 움직이거나, 번쩍이거나, 깜박이거나, 애니메이션되는 모든 콘텐츠를 점검한다. 여기에는 자동 재생 비디오, 애니메이션 GIF, CSS 키프레임 애니메이션, JavaScript 기반 애니메이션, SVG 애니메이션, canvas 요소, 광고 유닛이나 소셜 미디어 임베드 같은 서드파티 위젯이 포함된다. 각 인스턴스를 소스와 제어 메커니즘과 함께 문서화한다.
Photosensitive Epilepsy Analysis Tool(PEAT) 사용: PEAT는 Harding 사양에 따라 비디오 콘텐츠의 번쩍임 위험을 분석하도록 Trace Research and Development Center에서 개발한 무료 도구이다. 문제의 웹 페이지나 애니메이션을 전체 해상도로 화면 녹화한 뒤, 해당 비디오 파일을 PEAT에 가져온다. 도구는 어떤 시퀀스가 일반 번쩍임 임계값 또는 빨간 번쩍임 임계값을 초과하는지, 그리고 어떤 타임스탬프에서 발생하는지 보고한다.
방송급 콘텐츠에는 Harding Flash and Pattern Analyzer 적용: 제작 워크플로에서 임베드될 비디오 콘텐츠(예: 방송사 웹사이트, 뉴스 조직)를 게시하기 전에 소스 비디오 파일을 HFPA로 검사한다. 이는 게시 전 스크리닝을 위한 골드 스탠더드 도구이다.
수동 관찰 — 세 번 번쩍임 카운트: 도구 기반 분석이 비현실적인 CSS 애니메이션, JavaScript 효과, GIF 파일의 경우, 애니메이션을 재생하면서 1초 안에 완전한 밝음-어두움-밝음 사이클이 몇 번 발생하는지 세어본다. 초당 3회 이상의 완전한 사이클이 관찰되면, 해당 콘텐츠는 비준수일 가능성이 높다. 프레임 단위 재생이 가능한 화면 녹화 소프트웨어를 사용해 카운트를 보조한다.
비디오 콘텐츠를 프레임 단위로 확인: DaVinci Resolve(무료 버전)처럼 프레임 수준의 파형 또는 히스토그램 데이터를 표시하는 비디오 편집기에서 비디오 파일을 연다. 빠른 시각적 변화 구간을 스크럽하면서 초당 3회 이상 발생하는 고-저 휘도 패턴이 교차하는지 확인한다. 특히 어두운 배경 위의 채도가 높은 빨간색이 포함된 시퀀스를 주의 깊게 살펴본다.
CSS 애니메이션은 브라우저 개발자 도구로 테스트: Chrome DevTools에서 Animations 패널(More Tools → Animations)을 연다. 선언된 애니메이션 지속 시간과 반복 주기를 검사한다. 각 반복마다 고대비 상태를 번갈아 가며, 전체 지속 시간이 333밀리초 미만인 애니메이션은 3 Hz 임계값을 초과하게 된다. 계산식: 완전한 밝음-어두움-밝음 사이클이 333ms 미만에 완료되면 해당 콘텐츠는 비준수이다.
경계 사례에 대해 공간 영역 평가: 콘텐츠가 3 Hz를 초과하는 속도로 번쩍이지만 화면에서 매우 작게 보이는 경우, 픽셀 단위 크기를 측정한다. 일반적인 시청 거리(약 57–60 cm)에서 1024픽셀 너비 디스플레이 기준 안전 영역 임계값은 대략 21,824 제곱 픽셀이다. 번쩍이는 영역의 너비와 높이를 곱해 그 결과가 이 임계값보다 작은지 확인한다. 임계값 아래라면 안전 영역 예외에 해당할 수 있지만, 이 평가는 신중하게 문서화해야 한다.
페이지 로드 시 자동 재생 비디오 테스트: 페이지가 로드된 후 어떤 상호작용도 하지 않은 채, 비디오나 애니메이션이 자동으로 재생되기 시작하는지 관찰한다. 자동 재생되는 콘텐츠가 있다면, 사용자가 개입할 기회 없이 노출되므로 위의 테스트를 즉시 적용해야 한다.

해결 방법

빠르게 번쩍이는 자동 재생 GIF — 잘못된 예

<!-- An animated GIF that cycles between a bright yellow and black frame
     at approximately 10 times per second, far exceeding the 3 Hz threshold -->
<img src='attention-flash.gif' alt='Special offer alert' width='600' height='300'>

빠르게 번쩍이는 자동 재생 GIF — 올바른 예

<!-- Replace the flashing GIF with a static image and use a subtle CSS
     animation that does not alter luminance rapidly. The animation here
     uses a gentle scale pulse at a rate well below 3 Hz (one cycle per 2 seconds). -->
<img src='attention-static.png'
     alt='Special offer alert'
     class='pulse-attention'
     width='600'
     height='300'>

<style>
  @keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }
  .pulse-attention {
    animation: gentlePulse 2s ease-in-out infinite;
  }
</style>

고대비 색상 사이를 번쩍이는 CSS 키프레임 애니메이션 — 잘못된 예

<!-- A CSS animation that alternates a banner between white and black
     with a 100ms total duration, producing 10 flashes per second -->
<div class='flash-banner'>SALE NOW ON</div>

<style>
  @keyframes flashEffect {
    0% { background-color: #ffffff; color: #000000; }
    50% { background-color: #000000; color: #ffffff; }
    100% { background-color: #ffffff; color: #000000; }
  }
  .flash-banner {
    animation: flashEffect 0.1s linear infinite;
  }
</style>

고대비 색상 사이를 번쩍이는 CSS 키프레임 애니메이션 — 올바른 예

<!-- Slowing the animation duration to 1 second per full cycle means
     the luminance alternates once per second (1 Hz), well below the 3 Hz limit.
     Alternatively, use prefers-reduced-motion to disable animation entirely
     for users who have opted into reduced motion at the OS level. -->
<div class='flash-banner'>SALE NOW ON</div>

<style>
  @keyframes flashEffect {
    0% { background-color: #ffffff; color: #000000; }
    50% { background-color: #000000; color: #ffffff; }
    100% { background-color: #ffffff; color: #000000; }
  }
  .flash-banner {
    animation: flashEffect 1s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .flash-banner {
      animation: none;
      background-color: #1a1a8c;
      color: #ffffff;
    }
  }
</style>

번쩍임 시퀀스를 포함한 임베디드 자동 재생 비디오 — 잘못된 예

<!-- Auto-playing video with no controls, no PEAT analysis performed,
     and no mechanism for the user to stop or pause before exposure -->
<video src='promo.mp4' autoplay loop muted width='800' height='450'></video>

번쩍임 시퀀스를 포함한 임베디드 자동 재생 비디오 — 올바른 예

<!-- Best practice: provide controls so users can pause immediately,
     add a poster frame so no video plays without interaction,
     or use preload='none' to prevent auto-loading. If autoplay is
     genuinely required by business logic, the video MUST have been
     screened with PEAT or HFPA and confirmed free of flash hazards. -->
<video
  src='promo-screened.mp4'
  controls
  muted
  preload='metadata'
  poster='promo-poster.jpg'
  width='800'
  height='450'>
  <track kind='captions' src='promo-captions.vtt' srclang='tr' label='Türkçe'>
</video>
<p>Bu video flaş analizi aracıyla (PEAT) incelenmiş ve güvenli bulunmuştur.</p>

일반적인 실수

GIF 파일은 기본적으로 안전하다고 가정하는 것: 많은 개발자는 애니메이션 GIF가 레거시 포맷이기 때문에 본질적으로 무해하다고 믿는다. 실제로 GIF는 초당 3 Hz를 초과하는 속도로 프레임을 순환할 수 있으며, 이 포맷에는 프레임 속도에 대한 기술적 제한이 없다. 고대비 프레임이 번갈아 나타나는 모든 GIF는 타이밍과 평가가 필요하다.
서드파티 광고 스크립트를 간과하는 것: 디스플레이 광고 네트워크는 번쩍이거나 깜박이는 애니메이션이 포함된 크리에이티브 유닛을 자주 제공한다. 광고 태그를 크리에이티브 콘텐츠를 검토하지 않고 임베드하는 퍼블리셔도, 해당 광고가 페이지에서 야기하는 WCAG 2.3.1 위반에 대해 책임을 진다. 광고 크리에이티브 검토 정책과 광고 네트워크와의 계약상 요구 사항을 구현해야 한다.
WCAG 2.3.1과 WCAG 2.2.2(Pause, Stop, Hide)를 혼동하는 것: 일부 팀은 일시정지 버튼을 추가해(이는 2.2.2를 충족) 증상을 해결하지만, 기본적인 번쩍임 속도(2.3.1 위반)는 해결하지 않는다. 두 기준은 독립적이다. 사용자가 상호작용하기 전에 이미 번쩍이기 시작한 콘텐츠에 대해, 일시정지 컨트롤이 2.3.1 준수를 소급해 보장해 주지는 못한다. 사용자는 상호작용 전에 이미 노출되기 때문이다.
빨간 번쩍임 임계값을 별도로 고려하지 않는 것: 3 Hz 일반 임계값을 알고 있는 개발자도 종종 별도의 빨간 번쩍임 임계값을 간과한다. 채도가 높은 빨간색 값을 빠르게 번갈아 사용하는 콘텐츠는 일부 사람들에게 3 Hz보다 약간 낮은 빈도에서도 광과민성 발작을 유발할 수 있다. 채도가 높은 빨간색 애니메이션은 특히 주의 깊게 검토해야 한다.
iframe에 로드된 콘텐츠를 무시하는 것: <iframe> 요소를 통해 서드파티 콘텐츠(소셜 미디어 위젯, 라이브 채팅 도구, 임베디드 대시보드 등)를 임베드하는 페이지는, 해당 페이지에 렌더링되는 그 콘텐츠의 접근성에 대해서도 책임이 있다. iframe 내부의 번쩍임 위험은 메인 문서의 번쩍임만큼이나 위험하다.
prefers-reduced-motion 미디어 쿼리 구현을 생략하는 것: 기본 애니메이션이 3 Hz 임계값 아래에 있더라도, @media (prefers-reduced-motion: reduce)를 구현하지 않으면 OS 수준에서 모션 감소를 선호한다고 표시한 사용자에게 아무런 배려가 제공되지 않는다. 이는 주로 AAA 수준의 WCAG 2.3.3에서 다루어지지만, 이 쿼리를 포함하는 것은 비용이 적고 효과가 큰 관행으로, 접근성에 대한 의지를 보여주고 위험을 줄여준다.
JavaScript setInterval 또는 requestAnimationFrame을 속도 제한 없이 사용하는 것: setInterval(fn, 50)으로 구동되는 애니메이션은 50밀리초마다 실행되어 초당 20회 사이클을 만들어내며, 이는 3 Hz 한도를 훨씬 초과한다. 개발자는 휘도에 영향을 주는 모든 애니메이션에 대해 333ms당 1회 이하의 변화로 유지되도록 필요한 인터벌 지속 시간을 명시적으로 계산해야 한다.
크기 예외를 쉽게 악용할 수 있다고 여기는 것: 일부 개발자는 0.006 스테라디안 안전 영역 예외를 알게 된 후, 위험한 번쩍임 효과를 단지 작게 만들어 그대로 두려 한다. 실제로 콘텐츠가 임계값 내에 있는지 정확히 계산하려면 사용자의 시청 거리와 디스플레이 해상도에 대한 지식이 필요한데, 이는 개발자가 통제할 수 없는 변수들이다. 광도 측정 없이 크기 예외에 의존하는 것은 위험하며 법적 측면에서도 불안정하다.
번쩍임 위험 평가를 문서화하지 않는 것: 비디오나 애니메이션 콘텐츠의 번쩍임 위험을 테스트하는 조직도, 그 평가 기록을 보존하지 않는 경우가 많다. 사용자 불만이나 규제 감사가 발생했을 때, PEAT 또는 HFPA 스크리닝을 수행했고 콘텐츠가 준수 판정을 받았다는 문서화된 증거는 성실한 노력을 입증하는 데 필수적이다.

터키 접근성 규정과의 관계

터키 대통령령 2025/10은 2025년 6월 21일 관보(Official Gazette) 제32933호에 게재되었으며, WCAG 2.2와 정렬된 의무적인 웹 및 모바일 접근성 요구 사항을 수립한다. 레벨 A 성공 기준인 WCAG 2.3.1은 모든 적용 대상 기관에 대해 의무 준수 범위에 포함된다.

이 대통령령은 단계적 준수 일정을 정의한다. 공공 기관 및 기관은 대통령령 발효일로부터 1년 이내에 레벨 A 완전 준수에 도달해야 하며, 규제 대상인 민간 부문 기관은 2년의 준수 기간을 가진다. WCAG 2.3.1은 사용자에게 의료적 응급 상황을 직접적으로 유발할 위험과 관련된 안전 중요 기준이기 때문에, 이 기준을 준수하지 않을 경우 다른 레벨 A 요구 사항에 비해 평판 및 법적 노출이 더 크다.

대통령령 2025/10에 의해 명시적으로 규제 대상이 되는 기관 유형은 다음과 같으며, 따라서 WCAG 2.3.1을 준수해야 한다.

공공 기관 및 정부 기관: 대민 웹사이트나 모바일 애플리케이션을 운영하는 모든 중앙 및 지방 정부 기관, 부처, 지방자치단체, 공공기관.
전자상거래 플랫폼: 분야와 관계없이 디지털 플랫폼을 통해 소비자에게 상품 또는 서비스를 제공하는 온라인 소매 및 마켓플레이스 운영자.
은행 및 금융 기관: 디지털 뱅킹 또는 금융 서비스를 제공하는 모든 인가 은행, 참여 은행, 투자 회사, 핀테크 운영자.
병원 및 의료 서비스 제공자: 예약, 환자 포털 등 환자 대상 디지털 서비스를 제공하는 공공 및 민간 병원, 폴리클리닉, 의료 네트워크.
20만 명 이상의 가입자를 보유한 통신 회사: 가입자 기준을 충족하는 주요 이동통신사 및 인터넷 서비스 제공업체와 그들의 셀프 서비스 포털 및 모바일 애플리케이션.
여행사: 온라인 예약, 예매, 정보 서비스를 제공하는 인가 여행 및 관광사.
민간 운송 회사: 항공사, 시외버스 운영사, 페리 운영사 및 소비자 대상 디지털 플랫폼을 보유한 기타 민간 운송 제공자.
국가교육부(MoNE) 인가 사립학교: 웹사이트나 디지털 학습 플랫폼을 운영하는, MoNE 인가를 받은 사립 교육 기관.

규제 대상 기관의 경우, WCAG 2.3.1 준수는 일회성 감사에 그치지 않고 지속적인 운영상의 노력을 요구한다. 번쩍임 위험은 비디오 업로드, 마케팅 애니메이션, 서드파티 광고 등 동적 콘텐츠를 통해 가장 흔히 도입되기 때문에, 조직은 초기 사이트 감사뿐 아니라 콘텐츠 게시 워크플로에 번쩍임 위험 스크리닝을 내재화해야 한다. 게시 전 비디오 스크리닝을 위한 PEAT 같은 도구 사용과, 안전한 애니메이션 속도 한계 및 CSS prefers-reduced-motion 구현에 대한 개발자 교육을 결합하는 것이, 대통령령 하에서 규제 대상 기관에 요구되는 최소한의 운영상 성실 노력 기준이다. 서드파티 콘텐츠 관리 또는 광고 시스템에 의존하는 조직은 공급업체에게 WCAG 2.3.1 준수를 요구하는 계약 조항도 확보해야 하며, 규제 의무는 대민 디지털 서비스를 운영하는 기관에 귀속된다는 점을 유념해야 한다.