Texte de corps lisible : mesure, hauteur de ligne et contraste

Ce que c'est

La mesure est la longueur d'une ligne en caractères. L'interlignage (line height) est la distance entre une ligne de base et la suivante. Le taux de contraste est le rapport de luminance entre le texte et son arrière-plan. Les WCAG 2.2 donnent des chiffres pour ces trois propriétés. Le critère 1.4.8 Présentation visuelle (AAA) exige, pour les blocs de texte : une largeur ne dépassant pas 80 caractères ou glyphes (40 pour les idéogrammes CJK), un texte non justifié, un interlignage d'au moins une fois et demie la taille de police au sein des paragraphes, avec un espacement entre paragraphes d'au moins 1,5 fois l'interlignage, et un texte redimensionnable jusqu'à 200 % sans défilement horizontal. Le critère 1.4.12 Espacement du texte (AA) exige qu'aucun contenu ni aucune fonction ne se perde lorsque la personne qui utilise le site impose un interlignage d'au moins 1,5 fois la taille de police, un espacement de paragraphe de 2 fois, un espacement de lettres de 0,12 fois et un espacement de mots de 0,16 fois. Le critère 1.4.3 Contraste (AA) exige 4,5:1 pour le texte et 3:1 pour le grand texte, que le document définit comme environ 18 points, ou 14 points en gras.

Pourquoi c'est important

Des lignes trop longues font perdre à l'œil sa place lors du retour à la ligne ; un interlignage trop serré fait fusionner les lignes ; un faible contraste devient illisible en plein soleil et pour toute personne à la vision réduite. Ce sont les défaillances qui rendent le plus souvent désagréable à lire un contenu par ailleurs bien structuré, et elles coûtent peu à corriger.

Comment l'appliquer

• Contraindre la colonne de texte avec max-width en unités ch (par exemple max-width: 65ch). Un ch correspond à la chasse du glyphe 0 de la police, si bien que la limite s'ajuste avec la police ; dans une police à chasse variable, une ligne contient plus de caractères que sa valeur en ch, donc mesurer une ligne d'exemple par rapport au plafond de 80 caractères plutôt que de le supposer.
• Fixer line-height sous forme de nombre sans unité (1.5 ou plus pour le texte de corps, moins pour les grands titres) afin qu'il s'ajuste avec la police ; l'augmenter pour les longues lignes et pour les polices à hauteur d'x élevée.
• Utiliser rem pour les tailles de police et em/rem pour l'espacement, afin que le zoom du navigateur et les réglages de taille de police propres à la personne fonctionnent ; éviter les hauteurs fixes en pixels sur les conteneurs de texte pour que le texte réespacé ne déborde pas.
• Vérifier chaque paire texte/arrière-plan par rapport à 4,5:1, y compris le texte d'espace réservé, le texte sur des images et les deux jeux de couleurs ; les grands titres peuvent utiliser 3:1.
• Aligner le texte de corps à gauche (alignement de début) ; une justification sans césure produit des rivières d'espace blanc, et le critère 1.4.8 mentionne explicitement le texte non justifié.

Pièges

Les graisses de police fines perdent en contraste à l'écran, même lorsque le rapport de couleur est conforme. line-height en px ne s'ajuste pas avec le texte. Tronquer avec text-overflow: ellipsis masque du contenu lorsque les personnes agrandissent l'espacement. Les outils de contraste ne mesurent que la couleur ; une image d'arrière-plan chargée nécessite un fond uni ou flouté derrière le texte.