Aller au contenu

Texte, contraste et lisibilité

Un texte lisible est le fondement d'un site web accessible. Si les visiteurs ne peuvent pas lire votre contenu -- parce que le contraste est trop faible, le texte trop petit ou la structure peu claire -- le site échoue dans sa fonction la plus élémentaire.

Deux choses à garder à l'esprit :

  1. Le contraste se mesure. Les WCAG définissent des ratios de contraste minimaux. Vous pouvez vérifier n'importe quelle combinaison de couleurs avec des outils gratuits -- pas besoin de deviner.
  2. La lisibilité, c'est plus que la taille de police. L'interligne, l'espacement des lettres, la longueur des lignes et la structure des titres influencent tous la facilité de lecture de votre contenu.

Contraste des couleurs

Le contraste des couleurs est la différence de luminosité entre le texte au premier plan et son arrière-plan. Un contraste faible rend le texte difficile à lire pour tout le monde, et impossible pour les personnes malvoyantes.

Le WCAG AA exige ces ratios de contraste minimaux :

Type de texte Ratio minimal Exemple
Texte normal (moins de 18px ou moins de 14px en gras) 4.5:1 Gris foncé #595959 sur blanc #ffffff = 7:1 (validé)
Grand texte (18px+ ou 14px+ en gras) 3:1 Gris moyen #767676 sur blanc #ffffff = 4.5:1 (validé)
Composants d'interface et objets graphiques 3:1 Bordures de boutons, contours de champs, icônes

Vérifier le contraste en pratique

  1. Notez la couleur de votre texte (secteur Typography dans le panneau Style)
  2. Notez la couleur d'arrière-plan derrière (secteur Backgrounds & Borders, ou héritée d'un parent)
  3. Saisissez les deux valeurs dans un vérificateur de contraste :
  4. WebAIM Contrast Checker
  5. Colour Contrast Analyser (application de bureau)
  6. Les DevTools du navigateur (Chrome, Firefox, Edge affichent tous les ratios de contraste lors de l'inspection du texte)

Astuce : si vous utilisez des variables CSS pour votre palette de couleurs, vérifiez le contraste une fois par combinaison de variables. Documentez quelles paires passent le AA pour ne pas avoir à re-vérifier à chaque fois.

Échecs de contraste courants

  • Texte gris clair sur fond blanc
  • Texte blanc sur des photos claires sans calque sombre
  • Texte de placeholder dans les champs de formulaire (souvent trop clair)
  • Texte de bouton désactivé (nécessite tout de même 3:1 pour l'indicateur d'état désactivé)

Ne vous fiez pas à la couleur seule

Le WCAG 1.4.1 exige que la couleur ne soit pas le seul moyen de transmettre une information. Si vous marquez les champs requis d'une bordure rouge, ajoutez aussi un label textuel comme « (requis) » ou un astérisque avec une explication. Si vous utilisez le vert pour le succès et le rouge pour l'erreur, ajoutez aussi une icône ou du texte.

Bon : « Le mot de passe est trop court » en texte rouge avec une icône d'avertissement. Mauvais : une bordure rouge sur le champ sans explication textuelle.

Taille de police

Il n'y a pas de taille de police minimale stricte dans les WCAG, mais les recommandations pratiques sont claires :

  • Texte courant : 16px minimum (1rem avec les réglages navigateur par défaut). Un texte plus petit force les utilisateurs à zoomer.
  • Petits labels et légendes : 14px minimum pour la lisibilité.
  • Utilisez des unités relatives (rem, em) pour que le texte s'adapte quand les utilisateurs ajustent la taille de police de leur navigateur. Voir Typographie.

Les utilisateurs qui règlent la police par défaut de leur navigateur à 20px ou 24px le font parce qu'ils en ont besoin. Utiliser px pour tout peut annuler leur choix. Utiliser rem le respecte.

Interligne et espacement

L'interligne (line-height) influence la lisibilité plus que la plupart des gens ne l'imaginent. Le WCAG AAA recommande au moins 1.5 pour le texte courant. En pratique :

  • Texte courant : 1.4 à 1.6
  • Titres : 1.1 à 1.3 (ils ont moins de lignes, donc un interligne plus serré convient)

L'espacement des lettres (letter-spacing) doit être d'au moins 0.12em pour le texte courant selon le WCAG AAA. Pour le texte en majuscules, ajoutez-en davantage (0.05em à 0.08em) pour éviter que les lettres ne se collent.

L'espacement des mots (word-spacing) : le WCAG AAA recommande au moins 0.16em.

Ce sont des objectifs AAA -- non requis pour la conformité AA, mais ils améliorent mesurablement la lisibilité pour tout le monde.

Longueur des lignes

Les longues lignes de texte sont difficiles à lire. La longueur de ligne optimale est de 45 à 80 caractères par ligne. Dans Silex, vous la contrôlez en définissant une max-width sur vos conteneurs de texte plutôt qu'en laissant le texte s'étendre sur toute la largeur de la fenêtre.

Hiérarchie des titres

Les titres créent le plan de votre page. Les utilisateurs de lecteur d'écran naviguent en sautant de titre en titre -- si la hiérarchie est cassée, ils perdent le contexte.

Règles :

  • Un seul h1 par page -- le sujet principal de la page
  • Pas de niveaux sautés -- h1 puis h2 puis h3, jamais h1 puis h3
  • Les titres décrivent la structure, pas le style -- si un texte doit paraître grand sans être un titre, utilisez un p stylisé, pas un h2

Changez les niveaux de titre dans le menu déroulant Tag Name (réglages de l'élément, icône d'engrenage). Voir Structure de la page pour les détails.

Attribut de langue

L'attribut lang sur <html> indique aux lecteurs d'écran quelle langue utiliser pour la prononciation. Définissez-le dans les Réglages du site.

Si votre page contient du texte dans une autre langue (par exemple, une citation française sur une page anglaise), vous pouvez ajouter un attribut lang à cet élément spécifique via la section Attributes du panneau Data :

  1. Sélectionnez l'élément contenant le texte en langue étrangère
  2. Dans le panneau Data (icône d'engrenage), trouvez la section Attributes
  3. Cliquez sur + et nommez l'attribut lang
  4. Définissez sa valeur avec le code de langue (par exemple, fr)

Exemple pratique : vérifier et corriger le contraste sur une carte

Vous avez une carte avec du texte gris clair (#999999) sur un fond blanc (#ffffff).

  1. Vérifiez le ratio : saisissez #999999 et #ffffff dans le WebAIM Contrast Checker. Résultat : 2.85:1 -- échoue au AA pour le texte normal comme pour le grand texte.
  2. Corrigez : assombrissez le texte. Essayez #595959. Nouveau ratio : 7:1 -- valide le AA pour toutes les tailles de texte.
  3. Appliquez dans Silex : sélectionnez l'élément texte. Dans le panneau Style, secteur Typography, changez la couleur en #595959.
  4. Si vous utilisez des variables CSS : mettez à jour la valeur de la variable. Tous les éléments utilisant cette variable se mettent à jour automatiquement.

Erreurs courantes

  • Supposer que le gris clair sur blanc fait « épuré ». Cela peut paraître élégant aux designers voyants mais échoue aux exigences de contraste. Vérifiez toujours le ratio.
  • Oublier le texte sur les images. Le texte blanc sur une photo a besoin d'un calque sombre ou d'une ombre de texte pour garantir le contraste. La photo elle-même n'est pas un fond fiable -- les zones claires avaleront le texte.
  • Utiliser la couleur seule pour transmettre du sens. Rouge/vert pour erreur/succès, badges colorés sans labels, texte surligné sans contexte supplémentaire.
  • Définir les tailles de police uniquement en px. Les utilisateurs ayant besoin d'un texte plus grand ne peuvent pas facilement remplacer les valeurs en pixels. Utilisez rem pour le texte courant.
  • Sauter des niveaux de titre pour des raisons visuelles. Utilisez le CSS pour styliser les titres -- ne choisissez pas h4 parce qu'il a la bonne taille. Choisissez le bon niveau et stylisez-le.

Pour aller plus loin

Référence : résumé des exigences WCAG sur le contraste
Critère Niveau Exigence
1.4.3 Contraste (minimum) AA 4.5:1 pour le texte normal, 3:1 pour le grand texte
1.4.6 Contraste (renforcé) AAA 7:1 pour le texte normal, 4.5:1 pour le grand texte
1.4.11 Contraste des éléments non textuels AA 3:1 pour les composants d'interface et objets graphiques
1.4.1 Utilisation de la couleur A La couleur n'est pas le seul moyen visuel de transmettre une info
1.4.12 Espacement du texte AA Le contenu ne doit pas casser quand l'utilisateur remplace l'espacement

Quiz

Q1 : Votre texte courant est #757575 sur #ffffff. Le ratio de contraste est de 4.6:1. Passe-t-il le WCAG AA pour un texte de taille normale (16px) ?

  • A) Oui, il passe
  • B) Non, il échoue
  • C) Cela dépend de la police
Réponse

A) Oui, il passe -- le minimum pour le texte normal est de 4.5:1, et 4.6:1 le dépasse. Cependant, il passe de justesse -- envisagez d'assombrir le texte pour une marge plus confortable.

Q2 : Vous avez un formulaire où les champs requis ont une bordure rouge et rien d'autre. Est-ce accessible ?

  • A) Oui, le rouge est compris universellement
  • B) Non, la couleur ne peut pas être le seul indicateur
  • C) Oui, si le rouge est assez vif
Réponse

B) Non, la couleur ne peut pas être le seul indicateur -- le WCAG 1.4.1 exige que la couleur ne soit pas le seul moyen de transmettre une information. Ajoutez un label textuel comme « (requis) » ou un astérisque avec une explication.

Q3 : Un utilisateur règle la taille de police par défaut de son navigateur à 20px. Votre site utilise font-size: 14px sur le body. Que se passe-t-il ?

  • A) Sa préférence est respectée, le texte s'affiche à 20px
  • B) Votre 14px remplace sa préférence
  • C) Le navigateur utilise la plus grande des deux
Réponse

B) Votre 14px remplace sa préférence -- les valeurs absolues en pixels ignorent le réglage du navigateur de l'utilisateur. Utilisez plutôt font-size: 0.875rem si vous voulez 14px avec les réglages par défaut tout en respectant les préférences de l'utilisateur.

Éditer cette page sur GitLab