WCAG 2.3.1: Tres destellos o por debajo del umbral

Qué significa esta regla

WCAG 2.3.1 — Tres destellos o por debajo del umbral — es un criterio de éxito de Nivel A bajo el principio de Operable. Establece que las páginas web no deben contener ningún contenido que destelle más de tres veces en cualquier período de un segundo, a menos que ese contenido intermitente sea lo suficientemente pequeño o tenue como para situarse por debajo del umbral general de destellos o del umbral de destellos rojos definidos.

Un destello se define como un par de cambios opuestos en la luminancia relativa que pueden provocar convulsiones en personas susceptibles. En concreto, WCAG define dos tipos de destellos peligrosos:

• Destello general: Un par de cambios opuestos en los que la luminancia más alta es al menos el 10% de la luminancia relativa máxima (0,80), y la diferencia de luminancia es al menos el 10% de la máxima. En la práctica, esto significa contenido que alterna entre un estado brillante y un estado oscuro con suficiente rapidez como para producir un efecto estroboscópico.
• Destello rojo: Un par de transiciones opuestas que implican un color rojo saturado. Esto se trata con especial atención porque los destellos rojos se han asociado clínicamente con un mayor riesgo de desencadenar convulsiones fotosensibles.

El criterio se aplica a todo el contenido web independientemente del formato: animaciones HTML, transiciones CSS, efectos impulsados por JavaScript, videos incrustados, GIF, animaciones SVG, escenas WebGL, gráficos renderizados en canvas y widgets publicitarios de terceros. Si el contenido destella a una frecuencia superior a tres destellos por segundo y no se sitúa por debajo de los umbrales de luminancia o tamaño, incumple este criterio de forma incondicional.

Excepciones y umbrales que permiten que el contenido cumpla: WCAG 2.3.1 permite contenido intermitente si cumple cualquiera de las siguientes condiciones:

• El área combinada de los destellos que ocurren simultáneamente no cubre más de un total de 0,006 estereorradianes dentro de cualquier campo visual de 10 grados en la pantalla (aproximadamente un rectángulo de 341 × 256 píxeles a distancias de visualización típicas, o aproximadamente 21.824 píxeles cuadrados en una pantalla de 1024 píxeles de ancho vista a la distancia de un brazo).
• El destello está por debajo del umbral general de destellos (el cambio de luminancia es inferior al 10%) o por debajo del umbral de destellos rojos (el componente rojo saturado no cambia más que el umbral definido).

Por lo tanto, un evento de un solo destello con un contraste de luminancia muy bajo o un área de pantalla muy pequeña puede ser permisible. Sin embargo, dado que estos umbrales son matizados y requieren herramientas de medición fotométrica para verificarse con precisión, la mayoría de los profesionales adoptan el enfoque conservador de simplemente evitar todo contenido que destelle más de tres veces por segundo. El contenido que destella exactamente tres veces por segundo (3 Hz) está en el límite: el contenido que supera los 3 Hz no cumple, independientemente del tamaño, a menos que se cumplan de forma concluyente los umbrales de tamaño o luminancia.

El criterio rige cualquier contenido que se renderice durante la interacción normal con la página. No exime el contenido oculto detrás de controles activados por el usuario si ese contenido se reproduce automáticamente al cargar la página. Si un video comienza a reproducirse automáticamente y contiene secuencias intermitentes que superan el umbral, la página incumple este criterio desde el momento en que se carga.

Por qué es importante

La epilepsia fotosensible afecta aproximadamente a 1 de cada 4.000 personas a nivel mundial, alrededor del 3% de la población total con epilepsia. Sin embargo, la sensibilidad a la luz que destella o parpadea rápidamente es más amplia que la epilepsia clínica por sí sola. Muchas personas con trastornos de migraña, disfunción vestibular, condiciones del espectro autista y síndrome posconmoción pueden experimentar malestar significativo, desorientación, náuseas o dolor por estímulos visuales que destellan rápidamente, incluso si no tienen un trastorno convulsivo diagnosticado.

Las implicaciones son especialmente graves para este criterio en comparación con la mayoría de los demás requisitos de accesibilidad. Una persona que se encuentra con texto alternativo ausente experimenta exclusión y frustración. Una persona que se encuentra con contenido que desencadena una convulsión fotosensible puede experimentar una emergencia médica, incluida pérdida de conciencia, lesiones por caídas y, en casos raros pero documentados, consecuencias potencialmente mortales. El Harding Flash and Pattern Analyzer, una herramienta de radiodifusión ampliamente utilizada, se desarrolló específicamente para prevenir tales eventos en televisión, y la web presenta riesgos análogos.

Un escenario concreto del mundo real ilustra bien el peligro: considere un sitio web de noticias que reproduce automáticamente un video promocional que contiene una secuencia rápida de fotogramas alternos claros y oscuros, un artefacto común de ciertos efectos de compresión de video o de flash de cámara. Una persona con epilepsia fotosensible visita la página de inicio durante su trayecto matutino en un dispositivo móvil. Sin ningún aviso y sin oportunidad de desactivar el contenido, se expone a una secuencia que desencadena una convulsión mientras utiliza el transporte público. Este escenario no es hipotético; ha ocurrido en contextos reales, incluido el infame incidente del episodio de Pokémon de 2007 que desencadenó convulsiones en cientos de espectadores en Japón, y casos documentados que involucran unidades publicitarias basadas en la web.

Más allá de la dimensión de seguridad, el cumplimiento de este criterio también tiene implicaciones de usabilidad para el público general. El contenido que destella rápidamente crea una mala experiencia de lectura, aumenta la carga cognitiva y se considera disruptivo y poco profesional en la mayoría de los contextos de diseño. Eliminar dicho contenido mejora la concentración, reduce las tasas de rebote y transmite confianza, todo lo cual contribuye positivamente a métricas de SEO como el tiempo de permanencia y las tasas de interacción. Además, los rastreadores de motores de búsqueda tienen cada vez más en cuenta Core Web Vitals y señales de experiencia de usuario en las clasificaciones, y los sitios con anuncios o animaciones intermitentes invasivos pueden verse penalizados de forma indirecta.

Reglas relacionadas de Axe-core

WCAG 2.3.1 requiere pruebas manuales porque las herramientas automatizadas no pueden analizar de forma fiable las propiedades fotométricas del contenido dinámico en tiempo real. Ninguna regla automatizada de axe-core se corresponde directamente con este criterio. Las razones de esta limitación son fundamentales para el funcionamiento de la automatización de accesibilidad:

• Por qué la automatización falla aquí: Los escáneres automatizados analizan el DOM y el CSS estáticos en un momento dado. Pueden detectar que existe una animación o un elemento de video, pero no pueden medir la frecuencia real de los destellos, los valores de luminancia en cada fotograma o el área espacial de la región intermitente tal como la percibe una persona a una distancia de visualización típica. Determinar si un destello supera el umbral de 3 Hz o el umbral de área de 0,006 estereorradianes requiere un análisis fotométrico fotograma a fotograma, una tarea que requiere herramientas dedicadas como Harding Flash and Pattern Analyzer (HFPA), Photosensitive Epilepsy Analysis Tool (PEAT) o la revisión manual de los archivos fuente de la animación.
• Video incrustado y contenido de terceros: Gran parte del contenido de mayor riesgo (anuncios de video con reproducción automática, widgets incrustados de redes sociales, bibliotecas de animación de terceros) se carga desde dominios externos. Las herramientas automatizadas normalmente no pueden acceder ni analizar contenido de origen cruzado a nivel de fotograma, lo que hace imposible evaluar la frecuencia de destellos dentro de esos recursos de forma programática.
• Animaciones GIF y canvas: Los archivos GIF animados y los elementos canvas de HTML5 renderizan sus fotogramas de animación fuera del árbol de accesibilidad normal. Axe-core y Lighthouse carecen de la capacidad de decodificar el tiempo entre fotogramas de un GIF o interceptar las llamadas de dibujo de canvas para calcular los cambios de luminancia entre fotogramas.
• Animaciones CSS y JavaScript: Aunque axe-core puede detectar la presencia de propiedades CSS animation o transition, no puede evaluar si la salida visual resultante en tiempo de ejecución produce cambios de luminancia que superen los umbrales general o de destellos rojos.

Dado que ninguna regla automatizada detecta esta infracción, toda la carga del cumplimiento recae en la revisión manual de diseño, el análisis de video previo a la publicación y la concienciación de las personas desarrolladoras durante la fase de creación de contenido. Esto hace que los controles de proceso editorial y de QA —no solo la remediación técnica— sean esenciales para un cumplimiento sostenible.

Cómo hacer pruebas

1. Inventariar todo el contenido dinámico: Antes de cualquier prueba basada en herramientas, audite la página en busca de todo contenido que se mueva, destelle, parpadee o se anime. Esto incluye videos con reproducción automática, GIF animados, animaciones CSS con keyframes, animaciones impulsadas por JavaScript, animaciones SVG, elementos canvas y widgets incrustados de terceros como unidades publicitarias o incrustaciones de redes sociales. Documente cada instancia con su origen y mecanismo de control.
2. Usar Photosensitive Epilepsy Analysis Tool (PEAT): PEAT es una herramienta gratuita desarrollada por el Trace Research and Development Center, diseñada específicamente para analizar contenido de video en busca de riesgos de destellos según la especificación Harding. Grabe una captura de pantalla de la página web o animación en cuestión a resolución completa y luego importe el archivo de video en PEAT. La herramienta informará si alguna secuencia supera el umbral general de destellos o el umbral de destellos rojos y en qué marcas de tiempo.
3. Aplicar Harding Flash and Pattern Analyzer para contenido de calidad de radiodifusión: Para contenido de video que se incrustará desde flujos de trabajo de producción (por ejemplo, sitios web de radiodifusoras, organizaciones de noticias), ejecute los archivos de video fuente a través de HFPA antes de publicarlos. Esta es la herramienta estándar de oro para el filtrado previo a la publicación.
4. Observación manual: el conteo de tres destellos: Para animaciones CSS, efectos de JavaScript o archivos GIF en los que el análisis basado en herramientas sea poco práctico, reproduzca la animación e intente contar el número de ciclos completos claro-oscuro-claro dentro de un solo segundo. Si observa tres o más ciclos completos por segundo, es probable que el contenido no cumpla. Use software de grabación de pantalla con reproducción fotograma a fotograma para ayudar con este conteo.
5. Comprobar el contenido de video fotograma a fotograma: Abra los archivos de video en un editor de video (como DaVinci Resolve, versión gratuita) que muestre datos de forma de onda o histograma a nivel de fotograma. Recorra secciones de cambio visual rápido y compruebe si hay patrones alternos de luminancia alta-baja que ocurran más de tres veces por segundo. Busque especialmente secuencias que involucren rojo saturado sobre fondos oscuros.
6. Probar con las herramientas de desarrollador del navegador para animaciones CSS: En Chrome DevTools, abra el panel Animations (More Tools → Animations). Inspeccione las duraciones de animación declaradas y los ciclos de iteración. Una animación con una duración inferior a 333 milisegundos que alterna entre estados de alto contraste en cada iteración superará el umbral de 3 Hz. Calcule: si un ciclo completo claro-oscuro-claro se completa en menos de 333 ms, el contenido no cumple.
7. Evaluar el área espacial en casos límite: Si el contenido destella a una frecuencia superior a 3 Hz pero parece muy pequeño en pantalla, mida sus dimensiones en píxeles. En una pantalla de 1024 píxeles de ancho a una distancia de visualización normal (aproximadamente 57–60 cm), el umbral de área segura es de aproximadamente 21.824 píxeles cuadrados. Multiplique el ancho y la altura de la región intermitente; si el resultado está por debajo de este umbral, el contenido puede entrar dentro de la excepción de área segura, pero documente esta evaluación cuidadosamente.
8. Probar el video con reproducción automática al cargar la página: Desactive cualquier interacción con la página después de que se cargue y observe si algún video o animación comienza a reproducirse automáticamente. Si lo hace, aplique inmediatamente las pruebas anteriores al contenido con reproducción automática, ya que la persona usuaria no tiene oportunidad de intervenir antes de la exposición.

Cómo corregir

GIF con reproducción automática y destello rápido — Incorrecto

<!-- 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 con reproducción automática y destello rápido — Correcto

<!-- 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>

Animación CSS con keyframes que alterna entre colores de alto contraste — Incorrecto

<!-- 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>

Animación CSS con keyframes que alterna entre colores de alto contraste — Correcto

<!-- 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>

Video incrustado con reproducción automática y secuencias de destellos — Incorrecto

<!-- 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>

Video incrustado con reproducción automática y secuencias de destellos — Correcto

<!-- 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>

Errores comunes

• Suponer que los archivos GIF son seguros por defecto: Muchas personas desarrolladoras creen que, dado que los GIF animados son un formato heredado, son intrínsecamente inofensivos. En realidad, los GIF pueden alternar entre fotogramas a frecuencias que superan los 3 Hz, y el formato no impone ningún límite técnico a la tasa de fotogramas. Cada GIF con fotogramas alternos de alto contraste debe cronometrarse y evaluarse.
• Pasar por alto los scripts publicitarios de terceros: Las redes de publicidad gráfica sirven con frecuencia unidades creativas que contienen animaciones intermitentes o parpadeantes. Los editores que incrustan etiquetas de anuncios sin revisar el contenido creativo siguen siendo responsables de cualquier infracción de WCAG 2.3.1 que esos anuncios produzcan en sus páginas. Implemente políticas de revisión de creatividades publicitarias y requisitos contractuales con las redes de anuncios.
• Confundir WCAG 2.3.1 con WCAG 2.2.2 (Pausar, Detener, Ocultar): Algunos equipos abordan el síntoma añadiendo un botón de pausa (que satisface 2.2.2) pero no abordan la frecuencia subyacente de destellos (que infringe 2.3.1). Los dos criterios son independientes: un control de pausa no hace retroactivamente conforme el contenido que ya ha comenzado a destellar con 2.3.1, porque la persona usuaria se expone antes de poder interactuar.
• No tener en cuenta por separado el umbral de destellos rojos: Las personas desarrolladoras que conocen el umbral general de 3 Hz a veces pasan por alto el umbral separado de destellos rojos. El contenido que implica valores rojos saturados que alternan rápidamente puede desencadenar convulsiones fotosensibles incluso a frecuencias ligeramente inferiores a 3 Hz en algunas personas. Las animaciones con rojo saturado deben revisarse con especial atención.
• Ignorar el contenido cargado en iframes: Las páginas que incrustan contenido de terceros mediante elementos <iframe>, incluidos widgets de redes sociales, herramientas de chat en vivo o paneles incrustados, son responsables de la accesibilidad de ese contenido tal como se renderiza en su página. Los riesgos de destellos dentro de un iframe son tan peligrosos como los del documento principal.
• Omitir la implementación de la media query prefers-reduced-motion: Incluso cuando las animaciones base están por debajo del umbral de 3 Hz, no implementar @media (prefers-reduced-motion: reduce) significa que las personas que han indicado preferencias de movimiento reducido a nivel de sistema operativo no reciben ninguna adaptación. Aunque esto se aborda principalmente en WCAG 2.3.3 a nivel AAA, incluir la media query es una práctica de bajo costo y alto impacto que demuestra compromiso con la accesibilidad y reduce el riesgo.
• Usar JavaScript setInterval o requestAnimationFrame sin limitar la frecuencia: Las animaciones impulsadas por setInterval(fn, 50) se ejecutan cada 50 milisegundos, produciendo 20 ciclos por segundo, muy por encima del límite de 3 Hz. Las personas desarrolladoras deben calcular explícitamente la duración del intervalo necesaria para mantenerse en o por debajo de un cambio por cada 333 ms para cualquier animación que altere la luminancia.
• No filtrar el contenido de video antes de publicarlo: Muchas organizaciones tienen un flujo de trabajo de publicación que incluye QA visual y revisión de derechos de autor, pero carece de una etapa de filtrado de riesgos de destellos. Sin integrar PEAT o HFPA en la canalización de prepublicación, los riesgos de fotosensibilidad en el contenido de video pueden pasar desapercibidos hasta que causen daño.
• Tratar la excepción de tamaño como fácil de explotar: Algunas personas desarrolladoras se enteran de la excepción de área segura de 0,006 estereorradianes e intentan usarla para justificar dejar efectos de destellos peligrosos en su lugar reduciendo su tamaño. En la práctica, calcular con precisión si el contenido se sitúa dentro del umbral requiere conocer la distancia de visualización y la resolución de la pantalla de la persona usuaria, variables que la persona desarrolladora no puede controlar. Confiar en la excepción de tamaño sin medición fotométrica es arriesgado y jurídicamente precario.
• No documentar las evaluaciones de riesgos de destellos: Las organizaciones que sí prueban el contenido de video o animación en busca de riesgos de destellos a menudo no conservan registros de esas evaluaciones. En caso de una queja de una persona usuaria o una auditoría regulatoria, la evidencia documentada de que se realizó un filtrado con PEAT o HFPA y de que el contenido se consideró conforme es esencial para demostrar la debida diligencia.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web y móvil alineados con WCAG 2.2. WCAG 2.3.1, como criterio de éxito de Nivel A, entra dentro del ámbito de cumplimiento obligatorio para todas las entidades cubiertas.

La circular define un calendario de cumplimiento por fases: las instituciones y organismos públicos deben lograr la conformidad total de Nivel A dentro del año siguiente a la fecha de entrada en vigor de la circular, mientras que las entidades del sector privado cubiertas por la regulación disponen de dos años para cumplir. Dada la naturaleza crítica para la seguridad de WCAG 2.3.1 —que se relaciona directamente con el riesgo de desencadenar emergencias médicas en las personas usuarias—, el incumplimiento de este criterio en particular conlleva una exposición reputacional y legal mayor, incluso en comparación con otros requisitos de Nivel A.

Los siguientes tipos de entidades están explícitamente cubiertos por la Circular Presidencial 2025/10 y, por lo tanto, deben cumplir con WCAG 2.3.1:

• Instituciones públicas y organismos gubernamentales: Todos los organismos gubernamentales centrales y locales, ministerios, municipios y organizaciones afiliadas al Estado que operen sitios web o aplicaciones móviles de cara al público.
• Plataformas de comercio electrónico: Operadores de venta minorista en línea y de mercados que proporcionan bienes o servicios a personas consumidoras a través de plataformas digitales, independientemente del sector.
• Bancos e instituciones financieras: Todos los bancos con licencia, bancos de participación, firmas de inversión y operadores fintech que proporcionan servicios bancarios o financieros digitales.
• Hospitales y proveedores de atención sanitaria: Hospitales públicos y privados, policlínicas y redes de atención sanitaria que ofrecen servicios digitales orientados a pacientes, incluida la reserva de citas y los portales de pacientes.
• Empresas de telecomunicaciones con 200.000 o más abonados: Principales operadores de redes móviles y proveedores de servicios de internet que cumplan el umbral de abonados, incluidos sus portales de autoservicio y aplicaciones móviles.
• Agencias de viajes: Agencias de viajes y turismo con licencia que ofrecen servicios de reserva, reservación o información en línea.
• Empresas de transporte privado: Aerolíneas, operadores de autobuses interurbanos, operadores de ferris y otros proveedores de transporte privado con plataformas digitales de cara a las personas consumidoras.
• Colegios privados autorizados por el Ministerio de Educación Nacional (MoNE): Instituciones educativas privadas con autorización del MoNE que operan sitios web o plataformas de aprendizaje digital.

Para las entidades cubiertas, el cumplimiento de WCAG 2.3.1 requiere no solo una auditoría puntual, sino un compromiso operativo continuo. Dado que los riesgos de destellos se introducen con mayor frecuencia a través de contenido dinámico —cargas de video, animaciones de marketing, publicidad de terceros—, las organizaciones deben integrar el filtrado de riesgos de destellos en sus flujos de trabajo de publicación de contenido, no solo en su auditoría inicial del sitio. El uso de herramientas como PEAT para el filtrado de video previo a la publicación, combinado con la formación de las personas desarrolladoras sobre límites seguros de frecuencia de animación y la implementación de prefers-reduced-motion en CSS, representa el estándar mínimo de diligencia operativa esperado de las entidades cubiertas por la circular. Las organizaciones que dependen de sistemas de gestión de contenido o de publicidad de terceros también deben garantizar disposiciones contractuales que exijan el cumplimiento de WCAG 2.3.1 por parte de sus proveedores, ya que la obligación regulatoria recae en la entidad que opera el servicio digital de cara al público.