Avertissement : si vous êtes sensible au stress visuel, certains visuels de cet article peuvent être incommodants. Vous pouvez masquer toutes les images de l’article en cliquant sur le bouton ci-dessous :
Syndrome d’Irlen, Scotopic Sensitivity Syndrome, Visual stress, Pattern glare,.. de quoi s’agit-il ?
Depuis plusieurs années, j’enseigne l’accessibilité numérique à des étudiants d’horizons variés. Dans mes cours destinés aux concepteurs designers UI, j’accorde une attention particulière au stress visuel et au syndrome d’Irlen. Cette recherche trouve son origine dans une histoire personnelle : le fait qu’une de mes proches soit confrontée au stress visuel m’a conduit à explorer ce sujet pour le comprendre, dans la continuité de la passion que je nourris depuis longtemps pour les sciences et la médecine.
Récemment, lors d’une présentation professionnelle, l’intérêt suscité par cette thématique m’a convaincu de partager mes recherches plus largement.
Dans cet article, je vous propose de découvrir ce qu’est le stress visuel, notamment celui induit par les interfaces numériques. Je vous fournirai également des outils pour le diagnostiquer et des méthodes pour l’éviter dans vos conceptions. Comprendre ces mécanismes vous permettra de créer des expériences lisibles, supportables visuellement et réellement inclusives.
L’article se conclut par une liste de ressources qui ont nourri ma réflexion.
Sommaire de l'article
- Qu'est-ce que le stress visuel ?
- Symptomatologie du stress visuel en contexte numérique
- Hyperexcitabilité corticale et perception des motifs à fort contraste
- Prévalence et profils concernés
- Traduire le stress visuel en enjeux d'accessibilité et de design
- Conclusion
- Ressources controverse du syndrome d'Irlen
- Ressources scientifiques : de la notion de pattern glare / visual stress à l’hyperexcitabilité corticale
Qu’est-ce que le stress visuel ?
La définition scientifique : le stress visuel désigne un ensemble de difficultés perceptives qui surviennent lorsque le système visuel est exposé à certains stimuli, et ce, même en l’absence de pathologie oculaire classique (baisse d’acuité, lésion rétinienne, etc.).
Ces difficultés apparaissent typiquement dans des situations où :
- Le contraste est très élevé : texte noir sur fond blanc très lumineux, par exemple
- La structure spatiale est très régulière et dense : lignes de texte rapprochées, motifs rayés, grilles fines
- La luminance globale est forte : lumière artificielle intense, écrans brillants, néons, LED
Chez certaines personnes, ces paramètres déclenchent :
- Des distorsions perceptives : lettres qui bougent, vibrent ou se dédoublent
- Un inconfort immédiat : éblouissement, picotements, tension oculaire, maux de tête
- Une baisse de performance en lecture : vitesse réduite, pertes de ligne, fatigue rapide
L’intensité de ces manifestations varie considérablement d’une personne à l’autre. Pour certains, il s’agit d’un inconfort visuel « gênant » mais gérable. Pour d’autres, cet inconfort devient véritablement invalidant : maux de tête systématiques, impossibilité de lire longtemps, évitement de la lecture ou du travail sur écran.
Le pattern glare : une forme spécifique de stress visuel
Le pattern glare désigne plus précisément la réaction déclenchée par des motifs répétitifs à fort contraste : rayures noir/blanc, grilles fines, lignes de texte très serrées, etc.
(A) Premier motif témoin, 0,5 c/deg (rayures épaisses) ;
(B) motif cliniquement pertinent, 3 c/deg (épaisseur moyenne) ;
(C) troisième motif témoin, 12 c/deg (rayures fines)
Tests cités en ressources :
Sensitization and Habituation of Hyper-Excitation to Constant Presentation of Pattern-Glare Stimuli
Le pattern glare est donc une forme particulière de stress visuel. Il correspond aux situations où c’est principalement la structure répétitive et contrastée de l’image qui provoque les distorsions et l’inconfort.
Le stress visuel, notion plus large, englobe :
- Ces phénomènes de pattern glare
- La sensibilité à la lumière et à la luminance globale
- La sensibilité au contraste global de la page
Figure a : image de background dans la zone du hero, motif rayures/spirales, le contraste faible des couleurs limite l’effet
Figure b : le choix du visuel d’illustration n’est pas forcément judicieux malgré sa valeur esthétique
Figure c : le choix du motif de masque sur l’image avec un motif répété n’est pas judicieux
Figure d : le travail de flou sur l’image est intéressant mais peut générer un stress visuel
Historique terminologique : Irlen, Meares-Irlen, visual stress
Depuis les années 1980, plusieurs termes coexistent pour décrire ces troubles.
Scotopic Sensitivity Syndrome, Syndrome de Meares-Irlen, Syndrome d’Irlen :
Ces appellations proviennent des travaux d’Olive Meares (enseignante néo-zélandaise), qui a observé que certaines difficultés de lecture diminuaient avec l’utilisation de fonds colorés, puis d’Helen Irlen (psychologue Californie USA), qui a formalisé dans les années 1980 un « syndrome » accompagné d’une méthode basée sur des filtres colorés.
Dans ce cadre, le syndrome d’Irlen est présenté comme un trouble de la perception visuelle où :
- Le cerveau aurait des difficultés à traiter certaines longueurs d’onde lumineuses
- Cette « mauvaise interprétation » du spectre lumineux provoquerait distorsions, éblouissement et fatigue
- Des filtres colorés et lunettes spécifiques viendraient bloquer les longueurs d’onde problématiques et rétablir une perception plus confortable
Visual stress et pattern-related visual stress :
Ces termes plus récents, utilisés dans la littérature scientifique, décrivent de manière descriptive le stress visuel lié aux contrastes et aux motifs, sans nécessairement valider l’existence d’un « syndrome d’Irlen » comme entité pathologique distincte ni sa théorie explicative unique.
L’accent est mis sur :
- Les symptômes : distorsions, inconfort, maux de tête, baisse de performance
- Les configurations déclenchantes : motifs répétitifs à fort contraste, lumière intense, texte dense
Cette approche évite de présupposer un modèle unique basé sur un « défaut de perception des ondes lumineuses + filtres propriétaires d’Irlen ».
Au final, ces différents termes décrivent un tableau clinique associant :
- Des difficultés de lecture avec distorsions visuelles
- Une sensibilité marquée à certaines conditions lumineuses et contrastes
- Des maux de tête, une fatigue visuelle et des difficultés de concentration liées à la lecture ou au travail sur écran
La littérature récente privilégie le terme de stress visuel au sens large et considère le « syndrome d’Irlen » comme une hypothèse explicative parmi d’autres plutôt que comme une entité clinique autonome. Une revue systématique (Miyasaka et al., 2019), citée en fin d’article, conclut d’ailleurs que l’existence d’une pathologie spécifique telle que le syndrome d’Irlen reste incertaine et que la qualité globale des études disponibles est insuffisante pour l’affirmer de manière certaine.
Pour vous, designers d’interface et experts en accessibilité numérique, l’enjeu n’est pas de trancher cette controverse nosologique, mais de prendre au sérieux le stress visuel comme contrainte d’usage réelle.
Profils où le stress visuel est plus fréquemment rapporté
Ces distorsions visuelles et cette intolérance à certains motifs ou contrastes sont observées avec des fréquences plus élevées que dans la population générale dans différents troubles du neurodéveloppement :
Dyslexie et autres troubles DYS
Une proportion significative de personnes dyslexiques rapportent des lettres qui bougent, des lignes qui ondulent, une impression de scintillement lors de la lecture, s’ajoutant aux difficultés phonologiques « classiques ».
La dyslexie demeure avant tout un trouble du langage écrit, mais un stress visuel superposé peut aggraver la lenteur, la fatigue et l’évitement de la lecture.
TDAH (Trouble du Déficit de l’Attention avec ou sans Hyperactivité)
Des adultes avec TDAH présentent plus souvent des symptômes de stress visuel. Leur concentration chute en présence de motifs très contrastés ou de texte dense, avec une amélioration rapportée lorsque ces facteurs sont atténués.
L’interface ne se contente plus d’être un support d’information : elle devient un bruit visuel permanent qui consomme des ressources attentionnelles déjà fragiles.
Autisme (TSA – Troubles du Spectre de l’Autisme)
Les descriptions sensorielles des personnes autistes mentionnent fréquemment une hypersensibilité visuelle : lumière perçue comme douloureuse, motifs qui semblent se déformer, surcharge visuelle rapide.
Plusieurs chercheurs notent un recouvrement partiel entre ces expériences et les caractéristiques du stress visuel.
Des travaux récents sur les « environnements visuels intenses » montrent que la sensibilité aux motifs très chargés et à la surcharge visuelle (écran rempli d’éléments, absence d’espace blanc, informations partout) est transdiagnostique, mais particulièrement marquée chez les personnes autistes, avec TDAH ou dyslexiques.
En résumé, une interface « visuellement agressive » (fort contraste, texte très dense, animations, encombrement) ne gêne pas seulement quelques personnes sensibles à la lumière : elle peut cumuler les handicaps fonctionnels chez des utilisateurs DYS, TDAH ou autistes, et les mettre hors-jeu bien avant qu’on ait atteint les limites de leurs capacités cognitives réelles.
Symptomatologie du stress visuel en contexte numérique
Maintenant que nous avons défini le stress visuel, concentrons-nous sur ce qui importe pour un designer d’interface : comprendre les éléments déclencheurs et apprendre à les reconnaître.
Dans un contexte écran et lecture numérique, les symptômes rapportés se regroupent en quatre grandes catégories.
1. Manifestations visuelles
Les descriptions sont remarquablement stables d’une étude à l’autre et sont bien documentées dans les recherches sur la dyslexie.
Distorsions du texte
- Lettres ou mots qui semblent bouger, vibrer, onduler
- Texte qui se dédouble ou apparaît flou par intermittence
- Impression que le texte « coule » ou « s’effondre » sur la page
Effets de pattern glare
- Perception de bandes, de vagues, de scintillements dans les lignes de texte
- « Rivières » de blanc très visibles dans le texte justifié
- Motifs rayés ou grilles fines presque douloureux à regarder
entre les mots, effet « rivière ».
Sensibilité au contraste et à la lumière
- Éblouissement sous lumières fortes (néons, LED, soleil, écran non calibré)
- Inconfort marqué avec du texte noir (#000) sur fond blanc pur (#FFF), surtout sur écran lumineux
- Confort amélioré lorsque le fond devient crème, pastel ou gris doux et que le contraste est légèrement adouci (tout en restant suffisant)
2. Manifestations somatiques
Au-delà de l’inconfort visuel, ces phénomènes peuvent s’accompagner de symptômes corporels :
- Fatigue oculaire rapide (sensation d’yeux « fatigués » voire brûlants)
- Maux de tête, parfois localisés autour des yeux ou des tempes
- Nausées, vertiges légers chez certains utilisateurs
- Majoration de migraines chez les personnes prédisposées
Même lorsque l’examen ophtalmologique est normal (acuité corrigée, absence d’anomalie organique), la personne décrit une intolérance fonctionnelle à certaines configurations visuelles, particulièrement lors d’expositions prolongées.
3. Impact cognitif et émotionnel
Le stress visuel ne se limite pas à une gêne ponctuelle. Il affecte la capacité à traiter l’information :
- Ralentissement de la lecture : nécessité de relire, pertes de la ligne en cours, difficulté à maintenir le focus sur un paragraphe
- Baisse de la compréhension au fil du temps, par manque de ressources attentionnelles disponibles
- Épuisement cognitif en fin de journée passée sur un écran
- Anxiété anticipée face aux tâches de lecture : documents administratifs, longs contenus web, plateformes d’apprentissage en ligne, examens, etc.
4. Impact fonctionnel en environnement numérique
En pratique, pour une interface numérique, cela signifie qu’un utilisateur peut être techniquement capable de lire le contenu (acuité correcte, contrastes niveau AA respectés), mais incapable de le faire durablement sans douleur, fatigue ou perte de concentration.
Typiquement, cet utilisateur :
- Évite certains sites ou applications jugés « éblouissants », « illisibles » ou « fatigants »
- Scrolle rapidement pour « traverser » les sections trop denses ou très contrastées
- Ne lit que les éléments strictement nécessaires
Cette situation pose des problèmes évidents pour des contenus importants : textes d’aide, informations légales, consignes d’examen en ligne, contenus pédagogiques.
Hyperexcitabilité corticale et perception des motifs à fort contraste
Pour comprendre pourquoi certains motifs ou contrastes provoquent autant d’inconfort, quittons un instant le terrain du design pour explorer ce qui se passe au niveau du cortex visuel cérébral.
Les travaux d’Arnold Wilkins et de ses collaborateurs n’ont pas décrit un « syndrome », mais ont apporté plusieurs éléments de compréhension neuro-visuelle. Leurs résultats convergent sur trois points principaux.
Point 1 : réaction anormale à certains motifs répétitifs très contrastés
Lorsque certaines personnes regardent des rayures noir/blanc,
des grilles fines ou des lignes de texte très serrées, elles rapportent :
- Distorsions (lignes qui ondulent, se déforment)
- Scintillements, illusions de mouvement
- Inconfort immédiat, besoin de détourner les yeux
Ce phénomène correspond au pattern glare décrit dans la littérature de Wilkins.
Point 2 : profil plus fréquent dans certains groupes
Les études montrent que cette sensibilité aux motifs à fort contraste est :
- Plus fréquente chez les personnes migraineuses
- Plus fréquente chez celles qui décrivent déjà un stress visuel important à la lecture, des personnes photosensibles sans pathologie revendiquée, des personnes atteintes d’épilepsie photosensible
Le pattern glare ne se répartit donc pas au hasard : il se concentre chez des personnes qui ont déjà un rapport compliqué à certains stimuli visuels.
Source visual stress and migraine
Point 3 : hypothèse de l’hyperexcitabilité du cortex visuel
L’hypothèse aujourd’hui la plus discutée est celle d’une hyperexcitabilité du cortex visuel :
- Certains motifs très réguliers et contrastés déclencheraient une réponse excessive de neurones spécialisés dans le traitement de ces fréquences spatiales
- Cette sur-réponse se traduirait, au niveau conscient, par des distorsions, des scintillements, un inconfort, voire des migraines
- Le fait de modifier légèrement le contraste ou la chromaticité (par exemple via un fond légèrement coloré plutôt que blanc pur) pourrait réduire ces effets en changeant la manière dont le signal est distribué dans le cortex visuel
L’essentiel à retenir : certaines configurations visuelles (fort contraste, motifs répétitifs, texte très dense) ne sont pas seulement « désagréables ». Chez une partie des utilisateurs, elles correspondent à une véritable surcharge du cortex visuel, objectivée par les travaux de Wilkins et d’autres chercheurs.
Cela renforce l’idée centrale de cet article : il existe un coût neurophysiologique réel pour certains utilisateurs. Un design qui limite le pattern glare et offre des moyens de l’atténuer ne relève pas du confort « cosmétique », mais d’une réduction active de la charge neurovisuelle pour une partie des publics, notamment ceux qui cumulent migraine, DYS, TDAH ou autisme.
Prévalence et profils concernés
Après avoir décrit le stress visuel, sa symptomatologie et ses bases neuro-visuelles, vient la question des chiffres :
Le stress visuel touche-t-il beaucoup de monde ?
Parler de prévalence du stress visuel est délicat. Les valeurs les plus souvent citées (10 à 15 % de la population générale, avec des taux nettement plus élevés chez les personnes dyslexiques) proviennent d’études utilisant des outils de dépistage spécifiques, souvent développés par des équipes proches du réseau Irlen, sur des échantillons scolaires ou cliniques non représentatifs. Compte tenu de la controverse autour du syndrome d’Irlen, ces estimations ne peuvent pas être considérées comme des prévalences robustes au sens épidémiologique strict.
Les synthèses récentes sont plus prudentes :
- Wilkins et Evans indiquent que la prévalence du stress visuel dépend fortement des critères utilisés, mais que des formes « significatives » concerneraient une minorité de la population générale et « probablement moins d’une personne sur cinq parmi les personnes dyslexiques ».
- Evans (2016) conclut que le stress visuel est distinct de la dyslexie, même s’il peut coexister avec elle plus souvent que par hasard.
Autrement dit : nous sommes loin d’une « épidémie invisible » touchant 10 à 15 % de la population, mais le phénomène n’est pas non plus marginal. Une minorité non négligeable d’utilisateurs peut être gênée, parfois sévèrement, par le pattern glare et le stress visuel.
Chevauchement avec la dyslexie et les troubles d’apprentissage
Plusieurs études montrent :
- une co-occurrence accrue entre dyslexie et symptômes de stress visuel (distorsions, maux de tête à la lecture, soulagement avec certains filtres) ;
- mais aussi que le stress visuel reste un facteur contributif, pas le cœur du trouble : la dyslexie demeure principalement un trouble du langage écrit, d’origine phonologique.
Le Joint Statement Learning Disabilities, Dyslexia, and Vision des académies américaines le rappelle explicitement : les problèmes visuels peuvent gêner les apprentissages, mais ne sont pas la cause de la dyslexie, et les filtres colorés ou traitements visuels n’ont pas montré d’effet durable sur la réussite scolaire.
Ce point est crucial pour contrer les discours commerciaux qui promettent de « traiter la dyslexie » par des lunettes colorées (dont les lentilles Irlen).
Autres profils fréquemment associés
Les travaux récents et les synthèses (Wilkins, Evans et al.) décrivent également un recouvrement avec d’autres profils :
- TDAH
Plusieurs études trouvent une prévalence plus élevée de symptômes de stress visuel chez des personnes diagnostiquées TDAH, avec l’hypothèse que la surcharge visuelle consomme des ressources attentionnelles déjà fragiles. - TSA (Troubles du spectre de l’autisme)
Des travaux en optométrie et neuropsychologie rapportent une sensibilité accrue aux motifs forts, aux environnements visuels denses et à la lumière, et explorent la fréquence plus élevée de stress visuel dans ces populations. - Traumatismes crâniens, migraine, autres troubles neurologiques
Le stress visuel apparaît plus souvent chez des personnes migraineuses, avec syndrome post-commotionnel, fatigue chronique ou autres troubles neurologiques. Wilkins parle de « condition trans-diagnostique » qui modifie la tolérance à certains stimuli visuels.
Nous ne sommes donc pas face à un trouble isolé, mais à une sensibilité visuelle qui traverse plusieurs diagnostics, avec des mécanismes partagés (hyperexcitabilité corticale, photophobie, surcharge sensorielle).
Un cas particulier : épilepsie photosensible et contenus visuels
L’épilepsie photosensible ne relève pas à proprement parler du stress visuel tel qu’il est décrit dans cet article : ici, l’enjeu n’est pas « seulement » l’inconfort, mais la possibilité de déclencher une crise d’épilepsie sous l’effet de certains stimuli visuels.
Quelques points importants à intégrer dans la réflexion :
- toutes les personnes épileptiques ne sont pas photosensibles, mais, pour celles qui le sont, elle sont sensibles à :
- des lumières clignotantes,
- des alternances rapides de motifs ou de couleurs très contrastées,
- certains motifs géométriques (bandes, damiers, etc.)
peuvent suffire à déclencher une crise ;
- les mécanismes ne sont pas identiques à ceux du stress visuel, mais on retrouve une idée commune : certains stimuli visuels saturent littéralement l’activité de réseaux neuronaux dans le cortex visuel.
Pour un designer, la conséquence est double :
- respecter strictement les recommandations WCAG sur le contenu clignotant / flash est une question de sécurité pour les personnes photosensibles ;
- les mêmes choix visuels qui augmentent le risque pour elles (clignotements, effets stroboscopiques, motifs très agressifs) sont aussi ceux qui aggravent le stress visuel et le pattern glare chez d’autres profils (migraineux, DYS, TSA, etc.).
Ce qu’il faut retenir côté design
Aujourd’hui, il est raisonnable de considérer qu’une fraction non négligeable des utilisateurs d’interfaces numériques, notamment parmi ceux qui sont dyslexiques, TDAH, autistes, migraineux, ayant subi un traumatisme crânien, ou présentant une photosensibilité, aura une tolérance réduite au pattern glare, aux contrastes extrêmes et aux interfaces surchargées.
Nous n’avons pas besoin de chiffres plus précis pour justifier des options de design plus douces et configurables : l’enjeu n’est pas de mesurer au pourcentage près, mais de ne pas fermer la porte à ces profils, et d’éviter des effets visuels qui, selon les cas, vont :
- rendre la lecture pénible voire impossible ;
- déclencher des maux de tête, des crises de migraine ;
- ou, pour une minorité, augmenter le risque de crise d’épilepsie.
Traduire le stress visuel en enjeux d’accessibilité et de design
En tant que designer d’interface, vous pouvez soit soulager soit aggraver le stress visuel.
Comment éviter de soumettre vos utilisateurs à ce stress ?
Les méthodes et outils que je partage ci-après sont relativement génériques dans la conception d’interfaces numériques accessibles. Beaucoup proviennent d’observations faites pour d’autres troubles. Pour certains d’entre vous, ce sera une redite ; pour d’autres, un véritable support d’apprentissage.
Typographie et mise en page
Les guides sur la dyslexie (British Dyslexia Association, Dyslexia Style Guide, etc.) formalisent des principes compatibles avec la réduction du stress visuel.
Taille de police
Minimum 12–14 pt (≈ 16 px, la taille par défaut des navigateurs) pour le texte courant, davantage pour les contextes de lecture prolongée (article de blog par exemple, ne pas hésiter à augmenter raisonnablement la taille de police du texte pour rendre la lecture confortable. Par exemple, sur ce même blog/carnet, la taille de police des articles est de 2rem soit 20px, taille de police confortable pour la police Urbanist regular utilisée.
Choix de police
Sans empattement, lisible, avec des formes de lettres distinctes. Éviter les polices très condensées ou décoratives pour le texte long.
Polices recommandées : Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.
Pour vos choix de polices :
- Lettres simples, bien différenciées, sans empattements décoratifs
- Espacement suffisant entre les lettres
- Polices déjà installées partout, donc faciles à utiliser
(Note : nous aurons l’occasion de parler des fonts Dyslexie et OpenDyslexic dans un prochain article sur les choix de polices et l’accessibilité)
Alignement
- Privilégier l’alignement à gauche pour les langues qui se lisent de gauche à droite
- Bannir le texte justifié qui renforce les « rivières » de blanc
- Éviter les textes entièrement centrés ; se limiter à maximum 3 courtes lignes centrées
Pour le texte centré, vous devez privilégier un mouvement oculomoteur raisonnable (le mouvement oculomoteur en question : le trajet de votre regard du début d’une ligne à la fin de cette ligne jusqu’au début de la ligne du dessous etc.).
Largeur de ligne
Idéalement ≈ 60–80 caractères par ligne.
Au-delà, la charge oculomotrice (mouvement des yeux) et le risque de pertes de ligne augmentent.
Espacements
- Interligne (line-height) confortable : 1,4 – 1,8
- Espaces verticaux suffisants entre les paragraphes
- La mise en page doit rester lisible si l’utilisateur applique les recommandations de WCAG 2.2 – 1.4.12 Text Spacing :
- Interligne × 1,5
- Espace après paragraphe × 2
- Letter-spacing + 0,12em
- Word-spacing + 0,16em
Ces réglages diminuent la densité visuelle et, par conséquent, le stress visuel, tout en améliorant la lisibilité pour d’autres profils (dyslexie, basse vision, vision vieillissante).
Plus vous augmentez l’espace entre les lettres des mots, plus vous rendez difficile la lecture de ce mot. De même, plus vous augmentez l’espace entre les mots, plus vous rendez la phrase difficile à lire et à comprendre.
Remarques : pour vos titres, comme la taille de police est en générale plus grande, l’interlignage peut être trop important si vous multipliez par 1,5 votre taille de police, dans ce cas, c’est à vous d’évaluer la lisibilité confortable de votre titre avec un interlignage suffisant.
Couleurs, contraste et « low-glare design »
Principe clé : éviter le duo « noir pur sur blanc pur » pour les lectures longues
Conserver un contraste suffisant (≥ 4,5:1) ne signifie pas utiliser systématiquement du noir pur sur blanc pur.
Approche pratique en HSL pour des thèmes low-glare (faible éblouissement) :
HSL (Hue, Saturation, Lightness) est un espace colorimétrique qui permet de définir une couleur par sa teinte (H), son intensité (S) et sa luminosité (L). Ici, on joue surtout sur L pour éclaircir ou assombrir les fonds sans changer complètement de couleur.
- Définir une couleur de texte de référence
- Par exemple, un gris très foncé autour de 10 – 15 % de lightness en HSL
- Exemple : hsl(210, 10%, 13%) (gris très foncé légèrement bleuté)
- Travailler des fonds clairs en HSL
- Lightness plutôt entre 92 et 95 % (moins de 100 %)
- Dans des teintes crème, gris ou pastel
- Valider chaque combinaison
- HSL sert de « manette intuitive » pour ajuster L et réduire l’éblouissement
- On garde une saturation modérée
- On valide chaque combinaison avec un outil de contraste (WebAIM Contrast Checker, Tanaguru Contrast-Finder), qui calcule le ratio WCAG en sRGB
Dans le cas où la marque pour laquelle vous concevez l’interface a des couleurs aux contrastes forts, proposez au moins un thème « low glare » en plus du thème clair standard et du dark à l’aide d’un style switcher.
On en parle plus loin dans l’article mais évitez les fonds texturés ou très contrastés derrière les paragraphes : un fond uni doux est plus toujours sûr.
Outils recommandés :
- Logiciel : Colour contrast analyser
- Outil en ligne : WebAIM Contrast Checker : possibilité d’éclaircir/assombrir une couleur avec un slider pour atteindre 4,5:1
- Tanaguru Contrast-Finder : propose un fond ou un texte qui passe AA/AAA à partir de votre couleur de marque
Des lectures très riches sur le contraste et le design accessible :
- Articles de goodpractices.design sur le contraste et le design accessible
- Articles de Stéphanie Walter sur l’accessibilité des couleurs
Tensions importantes à gérer :
- Les personnes avec basse vision ont besoin de contrastes très élevés
- Certaines personnes avec stress visuel se sentent mieux avec un contraste légèrement réduit
Il est donc crucial d’être particulièrement vigilant dans vos choix de couleurs et de prévoir plusieurs options de contraste, plutôt qu’un seul réglage imposé à tout le monde ou bien redoubler de finesse dans vos choix de couleurs.
La solution idéale n’est pas un compromis unique, mais la personnalisation : laisser le choix du thème, de la luminosité et, idéalement, de la teinte de fond. Cela peut passer par l’intégration d’un style switcher, mais aussi par le fait de laisser les utilisateurs modifier les styles CSS de l’interface via des outils tiers.
En pratique, une partie des utilisateurs sensibles au stress visuel s’appuie déjà sur des extensions pour adapter les couleurs : Stylus, Stylebot, NoSquint Plus, ou des moteurs comme Dark Reader (Chrome, Firefox, Safari). Ces outils permettent de changer la couleur de fond, la couleur du texte ou d’injecter leurs propres feuilles de style CSS.
En tant que designer d’interface, l’enjeu est double :
- ne pas bloquer ces adaptations (éviter les CSS « anti-override », limiter le texte rendu en image) : à expliciter clairement aux intégrateurs et développeurs ;
- proposer, quand c’est possible, des options intégrées (thème low-glare, mode lecture, réglages de contraste et de police) pour que l’utilisateur n’ait pas à bricoler avec des extensions pour rendre l’interface supportable.
Limiter le pattern glare dans les interfaces
Les travaux sur le pattern glare montrent que les motifs répétitifs à forte fréquence spatiale et fort contraste sont particulièrement problématiques. Pour limiter le pattern glare, on prendra en compte non seulement les éléments décoratifs mais également la disposition d’éléments qui peuvent apparaître visuellement comme des répétitions rectilignes comme des listes, des tableaux ou autres éléments disposés en rangées ou colonnes.
Traduction en UI :
- Éviter les arrière-plans à rayures, damiers, grilles serrées derrière le texte
- Éviter les listes ou grilles très serrées avec peu d’espace blanc (espace négatif)
- Aérer les tableaux et dashboards, surtout si les lignes alternent des couleurs très contrastées (zébrage trop marqué)
L’objectif n’est pas de faire des interfaces « vides », mais de réduire les stimuli répétitifs agressifs.
Dans le second cas qui est incorrect, les rangées ne sont pas aérées, aucune couleur de fond permet de dissocier les rangées, et les rangées sélectionnées ne sont pas différenciées par leur couleur de fond.
Animations, carrousels et mouvement
Le stress visuel se combine fréquemment avec la migraine, la photosensibilité et d’autres sensibilités neurologiques. Les WCAG 2.2 cadrent déjà une partie du sujet (critères 2.2.* et 2.3.* ), mais on peut aller plus loin :
- Éviter les carrousels auto-défilants pour des contenus de lecture (et honnêtement éviter les carrousels, c’est très souvent une bonne idée)
- Respecter prefers-reduced-motion et, idéalement, proposer un réglage interne « réduire les animations »
- Éviter les micro-animations permanentes (hover très agités sur de larges zones, fonds animés, scintillements subtils) qui saturent l’attention visuelle
Conseil de designer d’interface : travaillez toujours vos effets de hover, même si sur mobile on ne les voit pas ! Les effets de hover racontent aussi une histoire et constituent à part entière votre design. Évitez les mouvements trop rapides, agressifs ou intrusifs. Soyez également très attentif aux contrastes de couleur, aussi bien pour les états de hover que de focus.
Un bouton qui permet de stopper les animations, c’est un symbole de liberté à mes yeux : il donne à chaque utilisateur le pouvoir d’être acteur de sa visite sur votre site.
Personnalisation et modes de lecture
C’est ici, en quelque sorte, la synthèse de tout ce que nous avons vu jusqu’à présent dans cet article.
Mode lecture / reading view :
- Fond teinté au choix : choix de couleurs low-glare
- Colonne unique de largeur contrôlée : éviter de dépasser 80 caractères par ligne et une seule colonne pour éviter de perdre notre lecteur dans le suivi de lecture à travers un jeu de colonnes
- Typographie optimisée pour la lisibilité : 16px minimum et en fonction votre police, ne pas hésiter à augmenter la taille de police pour plus de confort de lecture
- Suppression des éléments périphériques et des animations : on ne distrait pas notre lecteur
Préférences d’accessibilité intégrées au produit :
- Choix de thèmes via style switcher si besoin (clair, low-glare, sombre)
- Réglage de la taille et de l’espacement du texte
- Option « réduire les animations » ou « mode statique »
Compatibilité avec les solutions utilisateur :
- Ne pas casser les modes lecture des navigateurs
- Éviter de bloquer ou contourner les extensions qui modifient les couleurs/styles
- Maintenir la robustesse aux surcharges CSS, conformément à WCAG 1.4.12 Text Spacing et aux principes généraux de résilience
Conclusion
Trois points essentiels à retenir :
1. Le stress visuel est une réalité fonctionnelle, pas une simple gêne
Une partie non négligeable des utilisateurs expérimente un stress visuel réel, qui peut les empêcher d’utiliser confortablement, voire d’utiliser tout court, certaines interfaces. Ce stress est souvent déclenché ou amplifié par des choix de design : luminosité excessive, contraste extrême (noir pur sur blanc pur), motifs répétitifs serrés, animations permanentes. Pour ces utilisateurs, l’interface devient un obstacle, parfois insurmontable, avant même d’avoir pu accéder au contenu.
2. Des ajustements simples, des impacts majeurs
La bonne nouvelle ? Des ajustements relativement simples peuvent transformer l’expérience :
- Une typographie lisible avec un espacement approprié
- Une largeur de ligne maîtrisée (60-80 caractères)
- Des thèmes « low-glare » qui réduisent l’éblouissement tout en respectant les contrastes WCAG
- Une gestion sobre du mouvement et des animations
- Des options de personnalisation qui laissent le contrôle à l’utilisateur
Ces modifications peuvent profondément améliorer le confort de lecture et prolonger considérablement la durée d’utilisation possible d’une interface. Mieux encore : elles ne pénalisent personne.
3. L’accessibilité, c’est l’universalité
Ces mêmes ajustements bénéficient aussi aux personnes dyslexiques, malvoyantes, âgées, fatiguées, ou simplement en situation d’usage difficile (transport, écran au soleil, fin de journée). C’est toute la force du design inclusif : une solution pensée pour un besoin spécifique améliore l’expérience de tous.
Pour finir : concevoir accessible dès le départ
Je suis convaincu d’une chose : l’accessibilité numérique enseignée dès la formation initiale permet aux designers de concevoir des interfaces accessibles au plus grand nombre, sans effort supplémentaire par la suite.
Quand l’accessibilité est intégrée dès la phase de conception, chaque choix, chaque couleur, chaque espacement, chaque animation, est pensé avec conscience de son impact sur les utilisateurs. On n’ajoute pas l’accessibilité après coup comme une couche correctrice ; on la construit dès le départ comme un pilier du design.
Le design accessible n’est pas une contrainte : c’est une opportunité.
Une opportunité de créer des expériences plus confortables, plus robustes, plus inclusives. Une opportunité de toucher des publics que d’autres excluent involontairement. Une opportunité, finalement, de faire simplement du bon design, celui qui fonctionne pour tous, dans toutes les situations.
Le stress visuel n’est qu’un exemple parmi d’autres des défis que rencontrent nos utilisateurs. Mais c’est un exemple qui illustre parfaitement pourquoi l’accessibilité devrait toujours être au cœur de notre démarche de conception, et non une réflexion tardive.
Alors, la prochaine fois que vous ouvrirez votre logiciel de design, pensez à cette personne qui plisse les yeux devant votre maquette éblouissante. Pensez à celle qui perd sa ligne de lecture dans votre texte justifié trop serré. Pensez à celle qui ferme l’onglet après 30 secondes parce que votre interface lui donne mal à la tête.
Ces personnes existent. Elles ont besoin de vos interfaces. Et vous avez le pouvoir de les concevoir pour elles.
Ressources controverse du syndrome d’Irlen
Je partage ici les ressources qui m’ont permis de comprendre la controverse du syndrome d’Irlen, que je n’ai pas souhaité développer en détail dans cet article.
À garder en tête lors de la lecture de ces ressources : il n’existe aujourd’hui pas de preuve scientifique établissant l’existence du syndrome d’Irlen (défaut d’interprétation des ondes lumineuses) ni de démonstration formelle que les filtres colorés réduisent les symptômes de ce syndrome.
Ressources descriptives
Inserm – « Analyse critique des théories explicatives de la dyslexie »
eSantéMentale.ca (Canada) – « Le stress visuel : information pour les patients et leurs familles »
Cité des sciences et de l’industrie – Fiche « Syndrome d’Irlen » (2024)
Opticiens par conviction – « Le stress visuel » (France, 2023)
DerGam – « Vision floue : comprendre et traiter le stress visuel » (France)
France Dyslexia – Article sur dyslexie & polices
TeachSpecEd / Enseigner besoins spéciaux (Canada) – Traitement visuo-spatial
Opticalm Canada – « Le stress visuel » (Québec)
Ressources scientifiques sur le syndrome d’Irlen et le stress visuel
Absence de biomarqueur ou de test objectif
La revue systématique de Miyasaka et al. (2019) rappelle qu’aucun marqueur physiologique ou d’imagerie n’a été identifié pour distinguer un « syndrome d’Irlen » comme entité indépendante. La pathophysiologie reste incertaine, et il n’est pas clair si on parle d’un trouble autonome ou d’un sous-ensemble de la dyslexie.
Manque de critères diagnostiques standardisés
Le RANZCO (Royal Australian and New Zealand College of Ophthalmologists) souligne qu’un diagnostic d’Irlen Syndrome est basé uniquement sur des symptômes sans corrélation physiologique quantitative, et qu’il n’existe pas de critères clairement établis.
Fiabilité et reproductibilité discutables
La revue d’Evans conclut que l’amélioration du diagnostic du stress visuel est une priorité, ce qui indique que les outils actuels ne répondent pas pleinement aux standards en termes de sensibilité/spécificité et de reproductibilité.
Des travaux récents (Harkin et al., 2025, Ulster Visual Stress Questionnaire) notent qu’il n’existe actuellement aucun jeu de critères diagnostiques validés pour le stress visuel.
Chevauchement massif avec d’autres troubles
Des articles de synthèse sur Meares-Irlen Syndrome/Visual Stress (MISViS) rappellent que les symptômes (fatigue, maux de tête, distorsions, inconfort à la lecture) sont non spécifiques et doivent être différenciés de :
- troubles de réfraction (myopie, hypermétropie, astigmatisme),
- troubles binoculaires / accommodatifs,
- autres troubles neurovisuels,
- dyslexie et autres troubles du langage écrit. (source)
En résumé, il est parfaitement possible qu’une personne “positive” à un questionnaire ou à un test Irlen soit en réalité principalement affectée par un problème optique non corrigé, un trouble binoculaire, une dyslexie, une migraine photosensible… ou une combinaison de plusieurs de ces facteurs.
Meares-Irlen Syndrome/Visual Stress (MISViS) – EyeWiki (American Academy of Ophthalmology) (source)
Miyasaka J.D.S. et al., 2019 – Irlen syndrome: systematic review and level of evidence analysis (source)
Loew S.J., Jones G.L., Watson K., 2014 – Meares-Irlen/Visual Stress Syndrome, Classroom Fluorescent Lighting and Reading Difficulties: A Review of the Literature (source)
Loew S.J., 2017 – Reading conditions in schools: a review of fluorescent lighting, ultra-white paper, unexplained learning difficulties, and visual stress in the classroom (source)
“Visual Stress – an overview” – ScienceDirect topic (source)
“Understanding Meares-Irlen Syndrome: The Hidden Impact of Visual Stress” – Vision Science Academy (source)
Ressources scientifiques : de la notion de pattern glare / visual stress à l’hyperexcitabilité corticale
Article fondateur (pattern glare / visuel stress) : Wilkins, A. J., Nimmo-Smith, I., Tait, A., et al. (1984). A neurological basis for visual discomfort. Brain, 107, 989–1017 et donnera naissance en 2024 à l’article “Visual stress theory and its application to reading and reading tests” (Wilkins, Huang, Cao, 2004) disponible ici en pdf dans son intégralité (source)
Revue / test clinique Pattern Glare : Evans, B. J. W., & Wilkins, A. J. – The Pattern Glare Test: a review and determination of normative values. (source)
Article de synthèse récent par Wilkins sur visual stress & hyperexcitabilité : Wilkins, A. (2021). Visual stress: origins and treatment. Oruen – The CNS Journal, 6, 74–86. (source)
Article de Monger et al. sur pattern glare, contraste, couleur et hyperexcitabilité : Monger, L. J., Wilkins, A. J., & Allen, P. M. (2015). Pattern glare: the effects of contrast and color. Frontiers in Psychology, 6, 1651. (source)
Chez Sans Format, nous accompagnons les entreprises et associations dans la création ou la refonte de leur site web. Depuis toujours, Sans Format a pris l’engagement de réaliser des sites web accessibles à tous sans surcoût.
Nous nous engageons pour une accessibilité universelle, convaincus que le handicap n’est pas une limitation intrinsèque à l’individu, mais bien le résultat d’un environnement inadapté.
Vous avez déjà un site web ou un support numérique et vous n’avez aucune certitude de son accessibilité à tous ?
Design Clinic, c’est un coaching pratique qui décortique vos choix de design, de contenus et d’ergonomie pour les transformer en leviers d’inclusion, de performance et de durabilité.
