Accessibilité visuelle : contrastes, tailles de texte, focus

L’accessibilité visuelle rend un site lisible et utilisable par le plus grand nombre : contrastes suffisants, tailles de texte confortables, et repères visuels clairs pour naviguer, y compris au clavier. Ces principes, formalisés notamment par le RGAA, rejoignent en grande partie les bonnes pratiques d’un design soigné, plutôt que de s’y opposer.

Le contraste : lisible pour tous, pas seulement pour certains

Un texte gris clair sur fond blanc, à la mode dans certaines tendances récentes, complique la lecture pour une grande partie des visiteurs, pas uniquement pour les personnes malvoyantes : lumière du jour sur un écran de téléphone, fatigue visuelle en fin de journée, écran mal calibré touchent tout le monde à un moment ou un autre. Un contraste suffisant entre le texte et son arrière-plan reste l’un des réglages les plus simples pour améliorer la lisibilité réelle d’un site, sans rien sacrifier à l’esthétique si la palette est bien choisie. Pour le vérifier, affichez la palette sur un téléphone en plein jour, luminosité réduite : un gris trop clair s’y repère immédiatement.

La taille de texte : un vrai critère de design, pas un détail technique

Un texte trop petit, souvent choisi pour des raisons purement esthétiques, oblige le visiteur à zoomer ou à forcer la lecture, ce qui use son attention avant même d’avoir lu le message. Une taille de texte confortable, associée à un espacement de ligne suffisant, se combine parfaitement avec une mise en page élégante : les deux objectifs ne s’opposent pas, contrairement à une idée répandue.

• un corps de texte suffisamment grand pour une lecture sans effort sur mobile comme sur ordinateur ;
• un espacement entre les lignes qui laisse respirer le texte ;
• une hiérarchie de tailles claire entre titres et paragraphes ;
• une largeur de colonne de texte raisonnable, pour éviter des lignes trop longues à suivre.

Le focus visible : penser aussi à la navigation au clavier

Certains visiteurs naviguent sans souris, au clavier ou avec des outils d’assistance. Un indicateur de focus visible, ce contour qui apparaît autour d’un lien ou d’un bouton sélectionné, leur permet de savoir précisément où ils se trouvent sur la page. Beaucoup de sites suppriment cet indicateur pour des raisons purement esthétiques, ce qui rend la navigation impossible à suivre pour ces visiteurs.

Un focus visible bien dessiné, cohérent avec votre identité visuelle, ne nuit en rien à l’esthétique générale du site : il s’intègre comme un élément de design parmi d’autres.

Le RGAA, un référentiel qui formalise ces bonnes pratiques

Le RGAA (référentiel général d’amélioration de l’accessibilité) rassemble des critères précis sur ces sujets et sur d’autres aspects techniques de l’accessibilité. Ses critères reprennent notamment les seuils des WCAG : un rapport de contraste d’au moins 4,5:1 pour le texte courant, et de 3:1 pour les textes de grande taille (24 px, ou 18,5 px en gras) comme pour les composants d’interface. Il demande aussi que le texte reste lisible quand sa taille est portée à 200 % et que la prise de focus soit visible sur chaque élément interactif. Savoir qui doit s’y conformer relève de la loi et non du référentiel. D’un point de vue design, s’inspirer de ces critères profite à tous les visiteurs, indépendamment de toute obligation légale.

Intégrer l’accessibilité dès la maquette

L’accessibilité visuelle se traite bien plus facilement dès la conception qu’une fois le site construit. Choisir une palette suffisamment contrastée, une échelle de texte confortable et un traitement soigné du focus dès la maquette évite des retouches profondes une fois le site développé, où ces ajustements demandent souvent de revoir des choix graphiques déjà validés. Avant de valider la maquette, un contrôle simple consiste à imaginer un parcours au seul clavier : chaque lien, bouton et champ de formulaire doit avoir un état de focus dessiné.

Questions fréquentes

L’accessibilité visuelle réduit-elle les possibilités créatives ?

Non, elle les oriente plutôt vers des choix qui fonctionnent pour davantage de visiteurs. Un contraste suffisant, une taille de texte confortable ou un focus visible s’intègrent dans une direction artistique soignée sans l’appauvrir.

Mon site est-il obligatoirement soumis au RGAA ?

Cela dépend de la nature de votre structure, de sa taille et des services que vous proposez en ligne. Le RGAA ne désigne pas les organismes concernés : ce sont l’article 47 de la loi du 11 février 2005, ses textes d’application et, pour certains services aux consommateurs, les règles issues de l’acte européen sur l’accessibilité. Le RGAA sert ensuite de méthode pour vérifier la conformité. La rubrique Obligations du site accessibilite.numerique.gouv.fr aide à situer votre cas.

Comment vérifier simplement le contraste d’un site existant ?

Un outil gratuit comme Colour Contrast Analyser, ou l’inspecteur intégré aux navigateurs Chrome et Firefox, affiche le rapport de contraste entre une couleur de texte et son fond : il suffit de le comparer aux seuils de 4,5:1 et de 3:1 avant de valider la palette.

Vous souhaitez un site à la fois soigné et accessible au plus grand nombre ? Notre studio grenoblois de web design vérifie contrastes, tailles de texte et focus dès la maquette, dans le cadre de sa démarche d’UX et UI design. Soumettez-nous votre site actuel pour un premier regard sur ces trois points.