Typographie accessible sur le web : lisibilité, contrastes et réglages essentiels

Une typographie accessible sur le web repose moins sur le choix d’une police « parfaite » que sur un ensemble cohérent : caractères faciles à distinguer, taille confortable, contraste suffisant, lignes maîtrisées et mise en page qui résiste au zoom. Le bon réflexe consiste à tester ces réglages ensemble, avec de vrais contenus et plusieurs conditions de lecture.

Cette approche complète utilement notre guide consacré au choix d’une typographie pour un projet de design. Ici, l’objectif est plus précis : transformer une direction graphique en système de lecture utilisable, y compris lorsque la personne agrandit le texte, modifie ses espacements ou consulte la page sur un écran étroit.

Une police lisible ne suffit pas à rendre un texte accessible

Une famille de caractères peut sembler claire dans une maquette et devenir pénible une fois confrontée à un article long, un formulaire dense ou une interface mobile. La lisibilité dépend du dessin des lettres, mais aussi de la graisse, de la taille, du contraste, de l’espacement et de la largeur disponible.

Il faut également distinguer deux niveaux. La lisibilité décrit la facilité avec laquelle on suit une phrase ou un paragraphe. La reconnaissance des caractères concerne la capacité à différencier chaque signe. Une police très régulière peut échouer si le « I » majuscule, le « l » minuscule et le chiffre « 1 » se ressemblent trop. Même problème avec « O » et « 0 », ou avec des lettres dont les ouvertures sont presque fermées.

Pour un texte courant, observez en priorité :

• des formes suffisamment distinctes, y compris pour les chiffres et la ponctuation ;
• une hauteur d’x généreuse, sans écraser les ascendantes et descendantes ;
• des graisses intermédiaires réellement dessinées, plutôt qu’un faux gras produit par le navigateur ;
• les accents, ligatures et signes français nécessaires au contenu ;
• une version de secours cohérente si la police web tarde à charger ou reste indisponible.

Serif ou sans serif ? Aucune catégorie ne gagne automatiquement. Une bonne police avec empattements peut être plus lisible qu’une sans serif étroite et trop légère. Le contexte réel tranche mieux qu’une règle générale.

Choisir une taille de texte sans inventer une règle universelle

Les WCAG n’imposent pas une taille unique en pixels pour le corps de texte. Une base de 16 px est fréquente dans les navigateurs et constitue souvent un point de départ raisonnable, mais elle ne garantit rien à elle seule. La forme de la police, la densité de l’interface et la distance de lecture changent fortement le résultat.

Le critère utile est le comportement du texte lorsque l’utilisateur l’agrandit. Le W3C demande que le texte puisse être redimensionné jusqu’à 200 % sans perte de contenu ni de fonctionnalité. Autrement dit, un libellé ne doit pas disparaître, un bouton ne doit pas devenir inutilisable et un paragraphe ne doit pas être coupé par un conteneur à hauteur fixe. La page doit aussi permettre le reflow du contenu afin d’éviter un défilement horizontal permanent lors d’un fort agrandissement.

En pratique, privilégiez les unités relatives comme rem pour les tailles principales. Elles respectent mieux les préférences du navigateur qu’une accumulation de valeurs rigides. Gardez les conteneurs souples et vérifiez la page à 200 % de zoom, puis sur une largeur équivalente à 320 pixels CSS.

Un réglage de départ à adapter au contenu

body { font-family: Inter, Arial, sans-serif; font-size: 1rem; line-height: 1.6; } p { max-width: 68ch; margin-block: 0 1em; } h2 { line-height: 1.25; }

Ce code n’est pas une recette obligatoire. Il montre plutôt une logique : taille relative, interligne respirant et longueur de ligne plafonnée. Le design doit ensuite être vérifié avec la police choisie, car 68 caractères n’occupent pas la même largeur selon la famille et la graisse.

Régler l’interlignage, la largeur de ligne et les espacements

Un texte trop serré oblige l’œil à chercher la ligne suivante. À l’inverse, un interlignage excessif casse la continuité du paragraphe. Pour du texte courant, une valeur située autour de 1,5 à 1,7 offre souvent une base confortable. Les titres peuvent être plus compacts, à condition de ne pas laisser leurs lignes se toucher.

La largeur de ligne mérite la même attention. Sur un grand écran, laisser un paragraphe traverser toute la fenêtre crée de longues trajectoires visuelles. Une mesure proche de 45 à 75 caractères par ligne fonctionne généralement bien pour un article, avec un ajustement selon la police et le public. Sur mobile, les marges latérales doivent préserver l’espace sans réduire le texte à une colonne minuscule.

Le critère WCAG consacré à l’espacement du texte ajoute un test très concret. Le contenu doit rester utilisable si une personne impose notamment une hauteur de ligne de 1,5 fois la taille du texte, un espacement après les paragraphes de 2 fois cette taille, un espacement des lettres de 0,12 em et un espacement des mots de 0,16 em. Ces valeurs servent à tester la capacité d’adaptation de l’interface, pas à dicter votre feuille de style par défaut.

Évitez donc les blocs à hauteur fixe, les cartes qui masquent leur texte avec overflow: hidden et les boutons dimensionnés au millimètre. Une interface accessible accepte que le contenu prenne davantage de place.

Vérifier les contrastes sans se fier à son écran

Le contraste se mesure entre le texte et son arrière-plan réel. Pour le niveau AA, le W3C fixe un ratio minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte. La définition du grand texte dépend aussi de la graisse : augmenter légèrement la taille d’une police très fine ne suffit pas à rendre une couleur pâle acceptable.

Trois erreurs reviennent souvent :

• utiliser un gris trop clair pour les légendes, aides de formulaire ou métadonnées ;
• poser du texte sur une photographie sans contrôler toutes les zones traversées ;
• tester les couleurs séparément alors qu’une transparence ou un dégradé modifie le contraste final.

Un outil automatique aide à repérer les écarts, mais gardez une vérification visuelle. Le contraste mathématique ne corrige pas une graisse trop fine, une taille minuscule ou une police décorative difficile à déchiffrer. Sur une image, ajoutez un fond uni ou un voile suffisamment stable derrière le texte. Évitez aussi d’intégrer une information essentielle dans une image de texte : elle résiste mal au zoom, à la personnalisation et aux technologies d’assistance.

Construire une hiérarchie visible sans dépendre de la couleur

Une page claire permet de reconnaître immédiatement le titre, les sections, le texte courant, les liens et les informations secondaires. La taille participe à cette hiérarchie, mais elle ne doit pas travailler seule. Combinez taille, graisse, espacement et position. Un lien doit rester identifiable autrement que par une légère variation de bleu, surtout au milieu d’un paragraphe.

Limitez également les paragraphes entiers en capitales, les italiques longs et les graisses très légères. Ces choix peuvent convenir à un mot, une étiquette ou un accent éditorial. Sur plusieurs lignes, ils ralentissent la lecture. Pour les mêmes raisons, l’alignement à gauche reste généralement plus stable pour un long texte en français que le texte justifié, qui peut produire des espaces irréguliers.

Ces règles gagnent à rejoindre les fondations du design system : styles de texte nommés, couleurs associées à des rôles, largeur maximale des contenus et états de liens documentés. On évite ainsi de corriger l’accessibilité page par page.

Tester la typographie accessible dans des situations réelles

Une maquette statique ne montre pas les problèmes de zoom, de chargement ou de contenu imprévu. Préparez une page de test avec un titre long, plusieurs niveaux de sous-titres, des listes, des nombres, un formulaire, un message d’erreur et un paragraphe dense. Ajoutez les caractères accentués, les apostrophes, les unités et les liens présents dans le projet.

Contrôlez ensuite cette page avec une courte séquence :

1. désactivez temporairement la police web pour examiner la police de secours ;
2. agrandissez le texte ou la page à 200 % ;
3. réduisez la largeur de la fenêtre et cherchez les débordements horizontaux ;
4. appliquez les espacements de texte du test WCAG ;
5. mesurez les contrastes des textes, liens, erreurs et champs désactivés ;
6. parcourez la page au clavier pour vérifier que les liens restent visibles et compréhensibles.

Cette vérification s’intègre naturellement à une démarche plus large d’accessibilité numérique en UX design. Le designer définit le système, le développeur préserve sa souplesse et l’équipe éditoriale évite de casser la hiérarchie avec des titres interminables, des blocs en capitales ou des couleurs ajoutées au cas par cas.

La grille de décision à conserver

Avant de valider une typographie web, posez des questions simples. Les caractères proches se distinguent-ils ? Le texte reste-t-il confortable dans un article long ? Les couleurs passent-elles les seuils de contraste ? La page supporte-t-elle le zoom, le reflow et les espacements personnalisés ? La police de secours conserve-t-elle une mise en page utilisable ?

Si une réponse dépend de « l’utilisateur ne fera probablement pas ça », le réglage reste fragile. Une typographie accessible n’efface pas la personnalité graphique. Elle lui donne un cadre assez solide pour que le contenu reste lisible quand les conditions de lecture changent.

Camille Renaud, signature éditoriale d’ADE University.