---
title: "Formation accessibilité pour designers : tout commence dans la maquette"
description: "Rubrique parente : se former à l’accessibilité numérique. Un défaut dessiné coûte cher à rattraper Vérifier une palette quand on la choisit prend le temps d’un échange. Rectifier cette même palette une fois le site livré oblige à revoir la charte graphique, la bibliothèque de composants et chaque page qui s’en sert. Voilà pourquoi, selon […]"
url: "https://www.newp.fr/formation-accessibilite-numerique/formation-designers/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:36:18+00:00"
lang: "fr_FR"
---

# Formation accessibilité pour designers : tout commence dans la maquette

 Rubrique parente : [se former à l’accessibilité numérique](/formation-accessibilite-numerique/).

 

## Un défaut dessiné coûte cher à rattraper

 Vérifier une palette quand on la choisit prend le temps d’un échange. Rectifier cette même palette une fois le site livré oblige à revoir la charte graphique, la bibliothèque de composants et chaque page qui s’en sert.

 Voilà pourquoi, selon nous, former les designers rapporte plus que toute autre formation : elle intervient au seul moment où l’accessibilité ne coûte quasiment rien.

## Les choix du designer qui engagent l’accessibilité

### Le contraste

 Il faut 4,5:1 pour le texte courant et 3:1 pour les composants d’interface ainsi que les graphiques porteurs d’information. Ces ratios se mesurent avec un outil, jamais à l’œil, et s’appliquent aussi au survol, au focus, à l’état désactivé et à l’état d’erreur.

 L’erreur la plus répandue : le gris pâle réservé aux mentions secondaires et aux aides à la saisie, presque toujours en dessous du seuil.

### L’apparence du focus

 Elle se conçoit comme celle du survol. Si la maquette ne la prévoit pas, le développeur retirera l’indicateur par souci esthétique, et la navigation au clavier deviendra impossible.

### La séquence de lecture

 Elle doit figurer noir sur blanc dans la maquette, à **chaque largeur d’écran prévue**. Quand on intervertit des colonnes sur mobile, l’ordre affiché et l’ordre de tabulation se mettent à diverger.

### La dimension des zones cliquables

 Pictogrammes, boutons radio, flèches de diaporama : tout élément actif doit rester accessible à une personne qui tremble, ou à quelqu’un qui tient son téléphone d’une main, debout dans un bus.

### L’information qui ne repose pas que sur la couleur

 Champ requis, erreur, onglet actif, type de contenu : dès qu’une couleur porte un sens, un texte, une forme ou un pictogramme doit le porter aussi.

### Le texte intégré aux images

 Bannières, offres promotionnelles, infographies : leur texte doit être du vrai texte. Sinon, le lecteur d’écran ne le lit pas, l’utilisateur ne peut pas l’agrandir et les moteurs de recherche ne l’indexent pas.

 Un exercice qui ouvre les yeux Nous demandons aux participants d’ôter la couleur de leur propre maquette et de noter ce qui se perd, puis de recommencer sans les images. Ce qu’il en reste correspond à ce que perçoivent certains de leurs utilisateurs.

 

## Faire durer les acquis

 Un [design system qui intègre l’accessibilité](/mise-en-conformite-rgaa/design-system-accessible/), avec chaque décision et sa justification. Sans cette documentation, tout se renégocie à chaque projet : il se trouvera toujours quelqu’un pour juger le gris trop sombre ou le contour de focus trop voyant.

[Organiser la formation de vos designers](/contact/)

  [ Sujet précédent Former les contributeurs éditoriaux ](/formation-accessibilite-numerique/formation-contributeurs/) [ Sujet suivant La certification Opquast en détail ](/formation-accessibilite-numerique/opquast/)

---

*Source : [www.newp.fr](https://www.newp.fr/formation-accessibilite-numerique/formation-designers/)*