Comment rendre les textes d'un site lisibles ?
En bref
La lisibilité dépend de quelques réglages simples : un contraste suffisant entre le texte et son fond, une taille de caractère qui ne descend pas sous la taille courante des navigateurs, des lignes qui ne s'étirent pas sur toute la largeur de l'écran, un interligne aéré et l'absence de texte posé sur une image chargée.
Un texte illisible n'est pas lu, quel que soit son contenu. La lisibilité se règle à la conception, avec quelques paramètres qui ne coûtent rien et bénéficient à tous les visiteurs, notamment en mobilité, sur un écran de mauvaise qualité ou en plein soleil.
Qu'est-ce qu'un contraste suffisant ?
Le contraste est l'écart de luminosité entre la couleur du texte et celle de son fond. Il se mesure par un rapport, calculé automatiquement par des outils gratuits. Les règles internationales d'accessibilité fixent des seuils minimaux : plus élevés pour un texte courant, un peu plus souples pour les grands caractères.
Les pièges classiques : le gris clair sur blanc, à la mode mais fatigant ; le texte de couleur sur fond de couleur, dont le contraste est souvent plus faible qu'il n'en a l'air ; les états de survol et les textes de champ de formulaire, fréquemment oubliés lors des tests. Ces règles sont détaillées dans l'article sur l'accessibilité d'un site web.
Quels réglages de texte adopter ?
| Réglage | Repère | Erreur fréquente |
|---|---|---|
| Taille du texte courant | Ne pas descendre sous la taille par défaut des navigateurs | Un corps de texte réduit pour un rendu « élégant » |
| Longueur de ligne | Limiter la largeur du bloc de texte | Des lignes qui traversent tout un écran large |
| Interligne | Un espacement nettement supérieur à la hauteur des lettres | Des lignes collées, difficiles à suivre |
| Alignement | Aligné à gauche | Le texte justifié, qui crée des trous irréguliers |
| Majuscules | Réservées aux titres courts | Des paragraphes entiers en capitales |
Comment traiter le texte sur une image ?
Poser un titre sur une photo est courant, et souvent raté : le contraste varie d'un point à l'autre de l'image, et le recadrage sur mobile déplace le texte vers une zone claire. Trois solutions fiables : assombrir uniformément l'image sous le texte, poser le texte sur un bloc de couleur pleine, ou sortir le texte de l'image et le placer en dessous.
N'incrustez jamais un texte important directement dans le fichier image : il devient impossible à sélectionner, à traduire, à agrandir, et invisible pour les moteurs de recherche. Le sujet est développé dans l'article sur les images d'un site.
Que se passe-t-il quand on agrandit la page ?
Beaucoup de personnes agrandissent l'affichage dans leur navigateur. Une page correctement construite reste utilisable : le texte s'adapte, rien ne se chevauche, aucun contenu n'est coupé et une barre de défilement horizontale n'apparaît pas. Testez votre site à un niveau de zoom élevé sur ordinateur, puis sur téléphone avec la taille de caractères augmentée dans les réglages du système.
Les mises en page à hauteur fixe sont la cause la plus fréquente de texte tronqué, car le bloc ne s'agrandit pas quand le texte grossit.
La lisibilité, c'est aussi le texte lui-même
Les réglages visuels ne sauvent pas une phrase de six lignes. Quelques habitudes suffisent : une idée par paragraphe, des phrases courtes, des listes pour les énumérations, un terme technique expliqué à sa première apparition, des intertitres tous les quelques paragraphes. Ces principes sont repris dans l'article sur les textes d'un site.
Comment tester ?
- Mesurez les contrastes avec un outil dédié, y compris sur les boutons et les liens.
- Lisez une page sur téléphone, à l'extérieur, sans augmenter la luminosité.
- Demandez à une personne qui ne connaît pas le contenu de trouver une information précise.
- Vérifiez l'affichage avec un niveau de zoom élevé et avec les polices du système agrandies.
NexSecure fixe ces réglages dès les maquettes, dans le cadre de la création d'un site vitrine.
Questions fréquentes
Quel contraste faut-il entre un texte et son fond ?
Les règles internationales d'accessibilité fixent des rapports minimaux, plus exigeants pour le texte courant que pour les grands caractères. Des outils gratuits calculent ce rapport à partir des deux couleurs.
Le gris clair sur fond blanc pose-t-il problème ?
Souvent, oui. Il passe rarement les seuils de contraste et devient illisible sur un écran de mauvaise qualité ou en plein jour. Un gris foncé conserve l'effet visuel sans le défaut.
Faut-il justifier les textes d'un site ?
Non. La justification crée des espaces irréguliers entre les mots et gêne la lecture, en particulier sur écran étroit. L'alignement à gauche reste la valeur sûre.
Peut-on écrire un titre par-dessus une photo ?
Oui, à condition de garantir le contraste : assombrir l'image sous le texte ou poser le texte sur un aplat de couleur. Vérifiez le rendu sur mobile, où le recadrage déplace souvent le texte.
Sources
Service lié
Articles liés
Rédigé par l'équipe NexSecure. Responsable de la publication : Yohann Toumine. Dernière mise à jour le 11 septembre 2026.
Une question sur votre situation ? Parler de votre projet