Série En conditions réelles · Épisode 2 · 6 min

Voir ton site comme tes utilisateurs

Et si tu regardais ta page comme la voient tes utilisateurs ? Dans cet épisode, on passe une interface sous trois simulations : distinction rouge/vert, basse vision (flou et faible…

Publié le 2 novembre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Regarde bien cet écran. Tu le trouves clair, lisible, évident. Mais tout le monde ne le perçoit pas comme toi. Pour une personne qui distingue mal le rouge du vert, deux boutons peuvent se confondre. En situation de basse vision, un gris élégant peut devenir illisible. Et quand on agrandit le texte pour lire confortablement, la mise en page peut se casser. Dans cette vidéo, on va regarder ta page sous trois perceptions différentes, pour ressentir des barrières bien réelles. Pas pour imiter qui que ce soit : juste pour concevoir mieux.

Voir ton site comme tes utilisateurs

L’idée de cet épisode est simple : sortir de ton propre regard. Tu connais ton interface par cœur, tu sais où cliquer les yeux fermés. Tes utilisateurs, eux, arrivent frais, parfois avec une perception des couleurs différente, une acuité réduite, ou un navigateur agrandi. On va utiliser trois simulations. Elles ne remplacent pas un audit ni le retour des personnes concernées, mais elles rendent visibles des problèmes qu’on ne voit plus à force de les côtoyer. Chaque simulation renvoie à des critères précis du RGAA.

Trois perceptions (journey : couleur, flou, zoom)

Commence par les couleurs. Imagine que ta page indique un statut uniquement par une pastille : vert pour validé, rouge pour refusé. Pour une personne qui distingue mal le rouge du vert, les deux pastilles se ressemblent, et l’information disparaît. C’est exactement ce que vise le critère 3.1 : l’information ne doit pas reposer sur la seule couleur. La correction est légère, ajoute un mot, une icône ou une forme, et le message tient pour tout le monde. Passe maintenant au flou et au faible contraste, pour approcher une situation de basse vision. Applique un léger flou et regarde ce qui survit. Un gris clair sur blanc, autour de deux et demi pour un, se dérobe. Une encre foncée sur blanc, elle, reste franche. Le critère 3.2 fixe pour le texte courant un rapport de contraste usuel de quatre virgule cinq pour un, et un seuil plus bas pour le grand texte selon les conditions du référentiel. Si tu dois plisser les yeux, c’est déjà un signal. Termine par l’agrandissement. Beaucoup de gens grossissent le texte de leur navigateur pour lire sans effort. Le critère 10.4 demande que le texte reste lisible quand on l’agrandit jusqu’à 200 %. Agrandis vraiment ta page et vérifie : le texte grossit-il pour de vrai, ou reste-t-il figé ? Les blocs se chevauchent-ils ? Un contenu se coupe-t-il ? Ces trois regards, en quelques minutes, révèlent des barrières que ton œil habitué ne voyait plus.

Quand la couleur porte tout, l’info tombe

Le critère 3.1 mérite qu’on s’y arrête, parce que le piège est partout. Un formulaire qui dit « les champs en rouge sont obligatoires » exclut ceux qui ne perçoivent pas ce rouge. Un lien reconnaissable seulement à sa couleur se fond dans le texte. Un graphique qui oppose une courbe rouge à une courbe verte devient illisible sans légende. La couleur peut renforcer un message, c’est même très utile, mais elle ne doit jamais le porter toute seule. La parade est simple et ne coûte presque rien : ajoute un texte, une icône, une forme, un soulignement, un motif. Tu ne retires pas la couleur, tu lui donnes un équipier.

Un ratio, pas une impression

Le contraste, ce n’est pas une affaire de goût, c’est un rapport qu’on mesure entre la couleur d’un élément et celle de son fond. Le critère 3.2 s’occupe du texte : le seuil usuel est de quatre virgule cinq pour un pour un texte courant, et il descend à trois pour un pour le grand texte, selon les conditions du référentiel. Un gris clair sur blanc échoue souvent ; une encre foncée passe largement. Mais le contraste ne concerne pas que les paragraphes. Le critère 3.3 vise les composants d’interface et les éléments graphiques porteurs d’information : un bouton, une icône de statut, une barre de progression. Le seuil usuel pour ces éléments est de trois pour un. Un bouton bleu trop clair sur fond blanc, une icône fondue dans son arrière-plan : même problème que le texte trop pâle. Retiens la logique : ce qui porte du sens doit se détacher assez de son fond.

Le texte grossit, la page tient

Dernière simulation, celle de l’agrandissement, parce qu’elle piège beaucoup d’interfaces. Deux critères entrent en jeu. Le critère 10.4 demande que le texte reste lisible quand on l’agrandit jusqu’à 200 % au moins. Le texte doit vraiment grandir, pas rester bloqué à cause d’une taille figée en pixels. Le critère 10.11, lui, parle de reflow : les contenus doivent tenir sans perte d’information ni de fonctionnalité, sans forcer un défilement horizontal, dès une largeur de fenêtre de 320 pixels, l’équivalent d’un petit écran de téléphone. En clair, quand la place se réduit, tes colonnes doivent se réorganiser proprement, pas déborder ni se couper. Le test est concret : agrandis, rétrécis ta fenêtre, et vérifie que rien d’important ne disparaît et que tout reste cliquable. Si un design tient à 320 pixels de large et à 200 % de zoom, il tient partout.

Checklist

Checklist pour refaire ces tests toi-même, sans outil compliqué. D’abord, passe ta page en revue et demande-toi : est-ce qu’une information tient uniquement à une couleur ? Si oui, double-la. Ensuite, passe une capture de ta page dans notre simulateur de daltonisme sur RGAA Checker, et repère ce qui se confond. Ajoute un léger flou, en t’éloignant de l’écran ou avec un outil, et vois si le texte pâle et les repères ténus survivent. Agrandis ensuite le texte de ton navigateur à 200 % et cherche les chevauchements, les coupures, les zones qui ne bougent pas. Termine en rétrécissant la fenêtre jusqu’à environ 320 pixels de large et vérifie que rien d’important ne se perd. Ces gestes prennent cinq minutes et t’évitent une pile de retours d’audit. Garde en tête qu’une simulation approche une expérience sans la remplacer : le vrai juge de paix reste l’audit et le retour des personnes concernées.

CTA

Change de regard sur ton site, ne serait-ce que cinq minutes. Prends un parcours important, une page de commande, un formulaire, et fais-lui passer les trois simulations : couleur, contraste, agrandissement. Note ce qui casse, puis corrige, souvent par de petits ajustements. Et pour analyser une page en profondeur et prioriser ce qui compte, rends-toi sur RGAA Checker point com.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

D’autres épisodes qui abordent des critères proches, dans d’autres séries.

Contraste et couleurs
Épisode 2Bases RGAA3 minEn ligne
RGAA, WCAG, A/AA/AAA : qui fait quoi ?
Épisode 3Décoder l’audit7 minEn ligne
Zoom, reflow et responsive accessible
Épisode 3RGAA en pratique6 minEn ligne

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA