Police accessible : comment choisir une famille lisible

La typographie est le fondement de la lecture web. Une police mal choisie peut exclure des millions d'utilisateurs : malvoyants, dyslexiques, personnes âgées. Voici comment faire des choix typographiques inclusifs.

L'impact de la typographie sur l'accessibilité

La typographie affecte plusieurs types d'utilisateurs :

La taille, traitée à part

Ce guide porte sur le choix d'une famille de caractères. La question de la taille (16 px comme base, zoom à 200 %, unités relatives, critères RGAA 10.4 et 10.12) a ses propres exigences et son propre article : quelle taille de police retenir.

Une seule règle de taille intéresse le choix d'une police, parce qu'elle en dépend directement : deux familles réglées à la même valeur en pixels n'ont pas la même hauteur d'œil, donc pas la même lisibilité réelle. C'est la hauteur d'œil qu'il faut comparer, pas la valeur déclarée.

Familles de polices accessibles

Sans-serif : le choix sûr

Les polices sans empattements sont généralement plus lisibles à l'écran :

• Arial : universelle, sobre
• Verdana : conçue pour l'écran, lettres larges
• Helvetica : classique, professionnelle
• Open Sans : moderne, excellente lisibilité
• Roboto : optimisée pour les écrans

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, sans-serif;
}

Polices spécifiques dyslexie

Certaines polices sont conçues pour les lecteurs dyslexiques :

• OpenDyslexic : bases alourdies pour éviter le retournement
• Lexend : espacement optimisé pour la fluidité
• Dyslexie : caractères distinctifs

Cependant, les recherches n'ont pas démontré d'amélioration significative de la vitesse de lecture avec ces polices. Leur principal avantage est le confort subjectif de certains utilisateurs.

Recommandation : Proposez-les en option, mais ne les imposez pas par défaut.

Caractéristiques des polices accessibles

Lettres distinctives

Vérifiez que ces caractères sont facilement différenciables :

• l, I, 1 (L minuscule, i majuscule, chiffre un)
• O, 0 (lettre O, chiffre zéro)
• b, d, p, q (problématiques pour les dyslexiques)

Comparaison : Il1O0 bdpq

Arial :    Il1O0 bdpq  ← Moyen
Verdana :  Il1O0 bdpq  ← Bon

X-height (hauteur d'x)

Une hauteur d'x élevée améliore la lisibilité des minuscules :

Hauteur d'x basse : typography
Hauteur d'x haute : typography  ← Plus lisible

Ouvertures (apertures)

Des ouvertures larges sur les lettres comme c, e, a, s facilitent la reconnaissance :

Ouvertures fermées : aecs  ← Moins distinct
Ouvertures larges : aecs   ← Plus distinct

Interligne et espacement

Interligne (line-height)

L'interligne recommandé est de 1.5 pour le texte courant :

body {
  line-height: 1.5;
}

h1, h2, h3 {
  line-height: 1.2; /* Plus serré pour les titres */
}

Le WCAG 2.1 critère 1.4.12 exige que l'utilisateur puisse ajuster l'interligne à 1.5x sans perte de contenu.

Espacement entre les lettres

Un espacement légèrement augmenté peut aider :

body {
  letter-spacing: 0.01em; /* Subtil mais efficace */
}

Espacement entre les mots

body {
  word-spacing: 0.05em;
}

Alignement du texte

Évitez le texte justifié

Le texte justifié crée des "rivières" d'espaces blancs qui perturbent la lecture :

/* À éviter */
p {
  text-align: justify;
}

/* Préférable */
p {
  text-align: left;
}

Langues RTL

Pour l'arabe, l'hébreu et autres langues RTL :

[lang="ar"], [lang="he"] {
  text-align: right;
  direction: rtl;
}

Longueur de ligne

Une ligne trop longue fatigue l'œil. Visez 45 à 75 caractères par ligne :

article {
  max-width: 65ch; /* ~65 caractères */
}

L'unité ch correspond à la largeur du caractère "0" dans la police courante.

Contraste texte/fond

Le ratio de contraste minimum est :

• 4.5:1 pour le texte normal (WCAG AA)
• 3:1 pour le texte large (≥24px, ou ≥18,5px en gras)
• 7:1 pour une conformité AAA

/* Bon contraste */
body {
  color: #1a1a1a;
  background-color: #ffffff;
}
/* Ratio : 17.4:1 */

Testez vos contrastes avec notre outil de vérification.

Styles à éviter

Tout en majuscules

Le texte en majuscules est plus difficile à lire :

/* À éviter pour de longs textes */
.loud {
  text-transform: uppercase;
}

/* Acceptable pour courts labels */
.button-label {
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Compenser la densité */
}

Italique abusif

L'italique réduit la lisibilité, surtout sur écran :

/* Limiter l'italique aux citations courtes */
blockquote {
  font-style: italic;
}

/* Pas d'italique pour de longs paragraphes */

Polices décoratives

Réservez les polices fantaisie aux titres courts :

h1 {
  font-family: 'Playfair Display', serif; /* Acceptable */
}

body {
  font-family: 'Comic Sans MS'; /* Non ! */
}

Permettre la personnalisation

Le WCAG exige que les utilisateurs puissent modifier :

• Interligne à 1.5x
• Espacement des paragraphes à 2x
• Espacement des lettres à 0.12em
• Espacement des mots à 0.16em

Votre CSS ne doit pas bloquer ces ajustements :

/* Mauvais : empêche le redimensionnement */
body {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Bon : valeurs de base flexibles */
body {
  font-size: 1rem;
  line-height: 1.5;
}

Mode sombre et typographie

En mode sombre, ajustez légèrement le poids :

@media (prefers-color-scheme: dark) {
  body {
    /* Texte légèrement plus fin en clair sur sombre */
    font-weight: 300;
    /* Ou augmenter le tracking */
    letter-spacing: 0.02em;
  }
}

Consultez notre analyse des études sur le mode sombre.

Checklist typographie accessible

• Taille de base : 16px minimum
• Interligne : 1.5 pour le texte courant
• Longueur de ligne : 45-75 caractères
• Alignement : gauche (pas justifié)
• Contraste : 4.5:1 minimum
• Police : sans-serif lisible
• Lettres distinctives : l/I/1, O/0
• Pas de majuscules pour longs textes
• Personnalisation non bloquée

Critères RGAA concernés

Conclusion

Le choix typographique est un acte d'accessibilité. Une police lisible, une taille confortable et un espacement généreux bénéficient à tous vos utilisateurs, pas seulement ceux en situation de handicap. Investissez dans une typographie inclusive dès le début de vos projets.

Les trois critères du tableau ci-dessus ne se contrôlent pas de la même façon : le scan mesure vos contrastes (3.2) et repère les anomalies de personnalisation du texte (10.12), tandis que le zoom 200 % (10.4) reste une vérification à l'œil, pour laquelle il vous rend la consigne de contrôle.

Pour éprouver une famille typographique avant de l'adopter, le simulateur de dyslexie applique vos propres textes et donne une idée concrète de l'effort de lecture.

Analyser la typographie de votre page →