Changement brusque de luminosité ou effet de flash

Un flash, en accessibilité web, désigne un changement rapide et intense de luminosité entre deux états visuels opposés. Quand ce type de clignotement dépasse 3 occurrences par seconde et franchit certains seuils d'intensité, il peut déclencher des crises d'épilepsie photosensible. Les WCAG imposent des limites strictes pour protéger les utilisateurs.

Le 16 décembre 1997, une séquence de flashs rouge-bleu dans un épisode de Pokémon a envoyé 685 enfants japonais à l'hôpital. Convulsions et pertes de connaissance par centaines. La cause : des alternances lumineuses à environ 12 Hz pendant quatre secondes. C'est l'incident fondateur des règles anti-flash sur les écrans.

#Ce que les WCAG interdisent

Le critère 2.3.1 (niveau A) pose une règle claire : aucun contenu ne doit clignoter plus de trois fois par seconde, sauf si le flash reste en dessous des seuils de luminance générale et de rouge saturé.

Le rouge est traité à part. Les personnes épileptiques photosensibles y sont plus réactives qu'à toute autre couleur.

Ce critère fait partie des exigences de non-interférence des WCAG : même si votre page ne vise que le niveau A, le 2.3.1 s'applique à tout le contenu sans exception. Un carrousel conforme ne sauve pas une vidéo qui flashe.

#Les pièges que les développeurs ignorent

Les vidéos ne sont pas les seules coupables. Un GIF animé, une transition CSS agressive, un canvas qui redessine rapidement, une animation JavaScript : tout contenu capable d'alterner entre clair et sombre à haute fréquence est concerné. La documentation MDN liste sept technologies à risque.

Confondre « clignotement » et « flash ». Un curseur de texte clignote. Ce n'est pas un flash. Le flash suppose un changement de luminance suffisamment intense pour occuper une surface significative de l'écran. La distinction compte pour les tests de conformité.

Oublier prefers-reduced-motion. Ce n'est pas suffisant pour se conformer au 2.3.1, mais c'est une couche de protection supplémentaire. Les utilisateurs qui activent cette préférence dans leur système d'exploitation vous signalent un besoin réel :

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

#Comment tester

Le Trace Center propose PEAT (Photosensitive Epilepsy Analysis Tool), un outil gratuit qui analyse les vidéos et captures d'écran pour détecter les séquences à risque. Netflix l'utilise en interne pour vérifier ses productions avant diffusion.

#En résumé

Pas plus de trois flashs par seconde. Méfiez-vous du rouge saturé. Testez vos vidéos et vos animations avec PEAT. Et respectez prefers-reduced-motion : vos utilisateurs vous le demandent pour une raison.