Texte courant lisible : longueur de ligne, interligne et contraste

Ce que c'est

La longueur de ligne (largeur de composition) est le nombre de caractères par ligne. L'interligne (espacement des lignes) est la distance de ligne de base à ligne de base. Le rapport de contraste est la relation de luminance entre le texte et le fond. Les WCAG 2.2 donnent des chiffres pour ces trois éléments. Le critère de succès 1.4.8 « Présentation visuelle » (AAA) exige, pour les blocs de texte : au plus 80 caractères par ligne (40 pour les écritures CJC), pas de justification, un interligne d'au moins une fois et demie à l'intérieur des paragraphes et un espacement entre paragraphes au moins 1,5 fois plus grand que l'interligne, ainsi qu'un agrandissement à 200 % sans défilement horizontal. Le critère 1.4.12 « Espacement du texte » (AA) exige qu'aucun contenu ni fonction ne soit perdu lorsque les personnes règlent l'interligne à au moins 1,5 fois la taille de la police, l'espacement des paragraphes à 2 fois, l'espacement des lettres à 0,12 fois et l'espacement des mots à 0,16 fois. Le critère 1.4.3 « Contraste (minimum) » (AA) exige 4,5:1 pour le texte et 3:1 pour le texte grand, 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 le fil au retour à la ligne ; un interligne serré fait se confondre les lignes ; un contraste faible est illisible en plein soleil et pour toute personne à la vue réduite. Ce sont des erreurs répandues qui rendent même des contenus bien structurés désagréables à lire - et elles sont bon marché à corriger.

Comment l'appliquer

• Limiter la colonne de texte avec max-width en ch (par exemple max-width: 65ch). Un ch est la largeur d'avance du chiffre 0 de la police, la limite s'adapte donc à la police ; dans une police à chasse variable, une ligne contient en général plus de caractères que sa valeur en ch, il faut donc compter une ligne exemple par rapport à la limite de 80 caractères plutôt que de la supposer.
• Définir line-height comme un nombre sans unité (1.5 ou plus pour le texte courant, moins pour les grands titres), afin qu'il s'adapte à la police ; l'augmenter pour les lignes longues et les polices à hauteur d'x élevée.
• Utiliser rem pour les tailles de police et em/rem pour les espacements, afin que le zoom du navigateur et les réglages de taille de police fonctionnent ; pas de hauteurs fixes en pixels sur les conteneurs de texte, pour que le texte respacé ne déborde pas.
• Vérifier chaque paire texte-fond par rapport à 4,5:1, y compris le texte d'espace réservé (placeholder), le texte sur des images et les deux thèmes de couleurs ; les grands titres peuvent se contenter de 3:1.
• Aligner le texte courant à gauche (au début de ligne) ; la justification sans césure crée des rivières d'espace blanc, et 1.4.8 mentionne explicitement le renoncement à la justification.

Pièges

Les graisses fines perdent du contraste à l'écran, même quand le rapport de couleur est respecté. line-height en px ne s'adapte pas au texte. La troncature avec text-overflow: ellipsis masque du contenu quand les personnes agrandissent les espacements. Les outils de contraste ne mesurent que la couleur ; une image de fond chargée nécessite une surface opaque ou floutée derrière le texte.