Allons droit à la conclusion : un article facile à lire n'est pas un article habillé d'une police tendance. C'est un article dont on comprend le sujet dès l'ouverture, que l'on peut reprendre après une distraction, qui ne se casse pas quand on agrandit le texte et qui se lit naturellement dans n'importe quelle langue. Les lecteurs ne viennent pas pour « vaincre » votre article. C'est à l'article de montrer le chemin.
Le résumé en 3 lignes :
- Un bon point de départ pratique : un texte d'environ 17 à 18 px, un interligne de 1,7 à 1,9 et une largeur de ligne qui n'est pas trop longue. Ce n'est pas une loi universelle.
- Avec les WCAG 2.2 (la norme internationale d'accessibilité du web), l'essentiel est de ne pas casser le contraste, l'agrandissement du texte à 200 %, le reflow à 320 px CSS (la mise en page se réorganise selon la largeur de l'écran), le remplacement des espacements du texte et l'usage au clavier. [R1-R8]
- Pour 12 langues, il ne s'agit pas de copier-coller 12 fois le même CSS : il faut une base d'accessibilité commune, puis des réglages propres à chaque système d'écriture. [R10-R13]
1. La lisibilité n'est pas une affaire de goût : c'est une conception en 3 couches
La lisibilité comporte au moins trois couches : le texte se voit, on peut suivre ce qui est écrit, et on peut manipuler la page. Même en 18 px, un texte en bloc compact fatigue. Même un texte simple fatigue si les boutons sont minuscules. Autrement dit, « je corrige juste la taille de la police et c'est fini », c'est comme faire briller la plaque de la maison tout en retirant l'escalier.
2. Le lecteur ne lit pas tout dès le départ : l'article doit donc se lire à 4 niveaux
Sur le web, la lecture en diagonale est la norme. On fait donc en sorte que l'article se lise à quatre niveaux : 5 secondes = le titre et l'introduction, 30 secondes = les titres H2 et le gras, 3 minutes = les points clés, lecture approfondie = le texte entier. Cela ne veut pas dire qu'il ne faut écrire que court. Cela veut dire qu'un long texte doit offrir de nombreuses haltes en chemin.
Si les H2 seuls racontent une histoire cohérente, si chaque section s'ouvre sur une petite conclusion et si les tableaux et les listes permettent de comparer d'un coup d'œil, ceux qui lisent tout et ceux qui veulent juste la réponse peuvent cohabiter sur la même page.
3. Pour le corps du texte, partez d'environ 17 à 18 px
Il n'existe pas de taille idéale absolue pour le texte web. Mais un texte trop petit nuit à la visibilité, et dans une étude de suivi du regard sur de vraies pages web, une police plus grande était associée à des fixations plus courtes. [R14] En pratique, partez de 17 à 18 px pour le corps du texte et construisez avec des unités faciles à agrandir, comme rem.
L'important, c'est que « j'ai mis 18 px » ne veut pas dire « c'est accessible ». Le critère Redimensionnement du texte des WCAG 2.2 AA exige que le contenu et les fonctions ne soient pas perdus jusqu'à 200 % d'agrandissement. [R3] Si le menu disparaît à l'instant où le lecteur zoome, ce bel écran d'accueil en 18 px n'est qu'une photo souvenir.
4. Interligne, espace entre paragraphes et largeur de ligne réduisent le « trafic des lettres »
Un interligne d'environ 1,7 à 1,9 comme valeur de départ donne de l'air aux longs articles web. Laissez aussi un espace net entre les paragraphes. La règle de base est un thème par paragraphe ; évitez les blocs géants sans aucun retour à la ligne. [R9]
Pour l'alphabet latin, certaines recherches ont trouvé efficace une longueur de ligne moyenne d'environ 55 caractères, et en pratique 55 à 70 caractères est un point de départ commode. [R15] Le critère AAA Présentation visuelle des WCAG indique 80 caractères ou moins, et 40 ou moins pour le CJK (chinois, japonais, coréen). [R8] Là encore, 55 n'est pas une vérité universelle. On ajuste selon l'écran, la langue et la taille du texte.
Le texte justifié (aligné des deux côtés) a tendance à créer des espaces irréguliers entre les mots. Sur le web, un alignement d'un seul côté suffit en général. [R8]
5. La police n'est pas une baguette magique : prenez-en une qui se lit normalement et s'affiche vite
Entre empattement et sans empattement, il n'y a pas de gagnant universel. Dans une expérience contrôlée, on n'a pas observé de grand effet de l'empattement sur la vitesse de lecture. [R16] De plus, une méta-analyse de 2026 n'a pas trouvé de preuve constante que les « polices spéciales pour la dyslexie », comme OpenDyslexic, améliorent les résultats de lecture par rapport aux polices standard. [R17]
Autrement dit, prendre en compte le handicap ne signifie pas imposer une police spéciale. Les vraies bases sont une taille suffisante, de l'espace blanc, des formes de lettres naturelles, une bonne couverture des caractères et la possibilité pour l'utilisateur d'agrandir. Si vous privilégiez la police système de l'appareil ou une police courante pour chaque langue, vous évitez de charger d'énormes polices web.
6. Couleur de fond et contraste : le texte gris pâle coûte très cher en « taxe de style »
Les WCAG 2.2 AA fixent un contraste de 4,5:1 pour le texte normal et de 3:1 ou plus pour le grand texte. [R2] Inutile de poser du gris clair sur du blanc parce que « ça fait chic » et d'infliger un malus aux yeux du lecteur.
Plusieurs études montrent que le texte sombre sur fond clair (polarité positive) est avantageux pour la relecture et pour distinguer les petits caractères. [R18] Pour le grand public, le thème clair est donc un choix par défaut raisonnable. Certains préfèrent toutefois le mode sombre : gardez cette option. Il n'existe pas de preuve assez solide pour affirmer qu'un blanc cassé est toujours meilleur pour la santé qu'un blanc pur.
7. H1, H2 et H3 ne sont pas de la décoration : ce sont les panneaux de signalisation de l'article
Le H1 est le sujet de la page, le H2 un grand point, le H3 son détail. Ne simulez pas un titre en mettant du texte en gras ; donnez-lui un sens grâce à la structure de titres du HTML. Les utilisateurs de lecteurs d'écran se déplacent dans la page grâce aux titres : ceux-ci sont à la fois du design visuel et de la navigation. [R7][R9]
Le test est simple : si l'on extrait seulement les H2, comprend-on encore le fil de l'article ? Sinon, vos titres sont probablement de ceux qui fabriquent des lecteurs perdus, du genre « Chapitre 2 », « Suite » ou « Plus de détails ».
8. Gras, puces, tableaux et encadrés de conclusion servent de « panneaux d'information »
Le gras sert aux mots importants, les puces aux informations parallèles, le tableau à la comparaison, l'encadré de conclusion à l'atterrissage d'une décision. Donnez un rôle à chacun. Si vous mettez tout le texte en gras, c'est comme allumer 100 voyants d'alerte en même temps : au bout du compte, aucun ne ressort.
Ne distinguez pas les liens par la seule couleur ; donnez un autre indice, comme le soulignement. Et pour une information importante, ne vous arrêtez pas à « c'est rouge, donc c'est dangereux » : exprimez le sens aussi par du texte ou une icône.
9. Partez du principe du mode « cerveau à dopamine », sans croire au mythe des 8 secondes d'attention
Le « cerveau à dopamine » dont il est question ici n'est pas un terme médical. C'est un surnom humoristique pour l'état dispersé du web actuel : notification → vidéo courte → autre onglet → retour → « où en étais-je ? » Ce n'est pas un mot pour insulter toute une génération ou les personnes en situation de handicap.
La solution n'est pas de transformer tout l'article en vidéo courte. Ce sont des paragraphes courts, des titres précis, une petite conclusion par section, un sommaire si besoin, et des noms propres qui permettent de reconstituer le contexte au retour. La lecture automatique, les carrousels hors sujet et les pop-ups qui envahissent l'écran en pleine lecture reviennent à jeter une chaise sur la concentration du lecteur : réduisez-les. [R9]
10. L'accessibilité pour les personnes en situation de handicap est un équipement de série, pas un « mode spécial »
La base consiste à viser les WCAG 2.2 AA. Parmi les points typiques : agrandissement du texte à 200 %, reflow équivalent à 320 px CSS sans défilement horizontal, contraste de 4,5:1, cibles de pointage d'au moins 24×24 px CSS ou suffisamment espacées, utilisation au clavier, focus visible et mécanisme pour passer les blocs répétés. [R1-R7]
Les valeurs de l'Espacement du texte (« interligne 1,5, espace après paragraphe 2, espacement des lettres 0,12 em, des mots 0,16 em ») ne sont pas un ordre de les mettre dans votre CSS par défaut. L'exigence AA est que, si l'utilisateur impose ces valeurs, le texte ne se chevauche pas, ne disparaisse pas et que les fonctions ne se cassent pas. [R5]
En pratique, des boutons principaux d'environ 44 px sont plus faciles à toucher, mais le minimum des WCAG 2.2 AA est de 24×24 px CSS, avec des exceptions. [R6]
11. Les 12 langues partagent un même système de conception, sans se voir imposer la même composition typographique
Ce que l'on partage, c'est la base : contraste, hiérarchie des titres, agrandissement, reflow, espaces, facilité d'utilisation, noms accessibles. Ce qui change selon la langue, c'est la partie dépendante du système d'écriture : polices, retours à la ligne, césure, ponctuation et hauteur de ligne. [R10-R13]
L'attribut lang compte aussi. N'arrondissez pas zh-Hans, zh-Hant ou pt-BR en zh ou pt. C'est un indice pour le navigateur, la lecture vocale, la césure et le choix de la police.
12. Valeurs de départ pratiques par langue
| Groupe | Façon de penser les valeurs de départ |
|---|---|
| Japonais | Partir de 17 à 18 px, un interligne d'environ 1,8 et environ 30 à 40 caractères par ligne. Ne pas imposer d'espacement supplémentaire entre les lettres. Respecter la composition japonaise. [R10] |
| Chinois simplifié et traditionnel | Séparer les polices CJK et ne pas casser les règles de coupure de ligne ni la ponctuation. Distinguer zh-Hans et zh-Hant. [R11] |
| Coréen | Utiliser une police pour le hangeul et ne pas insérer d'espacement de lettres artificiel. Vérifier les retours à la ligne en coréen. [R12] |
| Thaï | Ne pas casser la mise en forme correcte des caractères ni les coupures aux limites de mots. Une hauteur de ligne un peu plus généreuse est plus sûre. Ne pas employer word-break: break-all à la légère. [R13] |
| Vietnamien | Utiliser une police couvrant tous les signes diacritiques et ne pas rogner le haut et le bas des lettres avec une hauteur fixe. |
| en/es/pt-BR/id/fr/de | Partir d'environ 55 à 70 caractères par ligne et envisager le bon lang ainsi que hyphens:auto. Vérifier les débordements, notamment avec les longs mots composés de l'allemand. |
13. Sur mobile, il ne suffit pas que ce soit « lisible » : il faut que ça « s'affiche vite »
Si vous empilez d'énormes polices web pour les 12 langues, le lecteur s'en va avant que le texte apparaisse. web.dev explique que les polices web retardent le FCP/LCP (la rapidité d'apparition du premier contenu et du contenu principal) et que l'échange de polices peut provoquer du CLS (décalage de mise en page). [R19] L'approche solide consiste à privilégier les polices système pour le corps du texte et à réserver les polices de marque aux endroits nécessaires.
Les objectifs « bons » actuels des Core Web Vitals, au 75e centile, sont un LCP de 2,5 secondes ou moins, un INP de 200 ms ou moins et un CLS de 0,1 ou moins. [R20] Un site où, en pleine lecture, une pub ou une police fait chuter le paragraphe vers le bas, c'est « tenir son livre du doigt pendant qu'un vendeur déplace la table ».
14. Les articles que l'on continue de lire ont toujours les mêmes choses au même endroit
Ce qui fait revenir les lecteurs, ce ne sont pas les effets tape-à-l'œil mais la prévisibilité. Si l'aspect des titres et des liens, le sommaire, la largeur de l'article, le sélecteur de langue, les résultats de recherche et la place des articles liés sont presque toujours identiques, le lecteur apprend à s'en servir.
Si vous proposez un réglage « Aa » pour changer la taille du texte, l'interligne et le thème, mémoriser ce choix est aussi une bonne idée. L'accessibilité, ce n'est pas demander à chaque fois « veuillez activer le mode handicap », mais une forme qui tient bien dès l'état initial et que seuls ceux qui en ont besoin ajustent.
15. Le « test d'endurance du lecteur » à ne pas faire subir
Exemples typiques à éviter : corps de texte d'environ 12 px, gris pâle, lignes de plus de 100 caractères, texte justifié, paragraphes qui remplissent tout un écran, niveaux de titres sautés, tout en gras, interface qui transmet le sens par la seule couleur, lecture automatique, pop-ups difficiles à fermer, texte du corps sous forme d'image, enfer du défilement horizontal à l'agrandissement, énormes polices web et animations sans signification.
Le lecteur n'est pas venu passer un examen pour savoir s'il a l'intelligence et l'acuité visuelle pour venir à bout de votre site.
16. En cas de doute, partez de ces valeurs de référence
| Élément | Valeur de départ pratique | Remarques |
|---|---|---|
| Corps du texte | 17 à 18 px | Pas une valeur absolue. Le rendre agrandissable |
| Interligne du corps | 1,7 à 1,9 | Ajuster selon la langue et la police |
| Ligne en alphabet latin | Environ 55 à 70 caractères | Point de départ issu de la recherche et de la pratique. Éviter les lignes trop longues [R15] |
| Ligne en CJK | Environ 30 à 40 caractères | 40 correspond aussi à la recommandation Présentation visuelle AAA des WCAG [R8] |
| H1 | Environ 32 à 40 px | Écart net avec le corps du texte |
| H2 | Environ 25 à 30 px | Les H2 seuls doivent faire comprendre le déroulé |
| H3 | Environ 21 à 24 px | Garder une différence avec le H2 |
| Contraste du texte normal | 4,5:1 ou plus | WCAG 2.2 AA [R2] |
| Grand texte | 3:1 ou plus | WCAG 2.2 AA [R2] |
| Cible de pointage | Référence : 24×24 px CSS ou plus | Des exceptions existent. En pratique, envisager aussi environ 44 px [R6] |
| Agrandissement du texte | 200 % | Sans perdre contenu ni fonctions [R3] |
| Reflow | 320 px CSS | En principe, pas de défilement dans deux directions [R4] |
17. Mettez en place un contrôle qualité. « Nous ferons attention » n'est pas une assurance qualité
Si vous gérez une usine à articles ou un CMS (système de gestion de contenu), ne laissez pas la lisibilité à la seule mémoire des humains. Avec des contrôles statiques, vérifiez lang, H1, l'ordre des titres, l'attribut alt des images, les noms accessibles et le CSS interdit ; avec des contrôles dans un vrai navigateur, vérifiez 320 px, l'agrandissement à 200 %, le remplacement de l'Espacement du texte, le clavier, le focus et le défilement horizontal.
Ce qui peut être corrigé en toute sécurité peut l'être automatiquement, par exemple un lang manquant ou l'application du CSS commun. Mais les corrections qui changent le sens, comme la signification du texte, les traductions ou le contenu des alt, ne doivent jamais être inventées. Si on ne peut pas corriger, on marque FAIL et on passe la main à un humain. Un contrôle qualité n'est pas un « professeur en colère », c'est un portillon qui ne laisse pas sortir un produit cassé.
18. En résumé : un bon article ne fait pas passer d'examen au lecteur
L'essence d'un article facile à lire n'est ni de grossir démesurément les caractères, ni d'aérer joliment la page. C'est de savoir où lire, de pouvoir reprendre en route, agrandir, toucher, se faire lire à voix haute, d'être naturel dans chaque langue, et d'être rapide. Il s'agit de réunir tout cela dans un même système de conception.
C'est naturel pour un adulte ordinaire, et cela ne se casse pas pour ceux qui se distraient facilement, ont une vue faible, ont du mal à lire ou utilisent le clavier et des technologies d'assistance. C'est ce qu'il y a de plus solide. Plutôt que de construire une « version accessible » dans une pièce à part, il suffit d'élargir la porte d'entrée dès le départ.
