Polices accessibles : guide typographique pour le web

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 :

[!NOTE] Environ 15 à 20% de la population mondiale présente une forme de dyslexie. C'est une audience considérable à ne pas négliger.

Taille de police recommandée

Corps de texte

La taille minimale recommandée pour le texte courant est 16px (1rem). C'est aussi la valeur par défaut des navigateurs.

body {
  font-size: 100%; /* 16px par défaut */
  /* ou */
  font-size: 1rem;
}

Hiérarchie des tailles

Établissez une échelle typographique cohérente :

:root {
  --font-size-xs: 0.75rem;   /* 12px - mentions légales */
  --font-size-sm: 0.875rem;  /* 14px - légendes */
  --font-size-base: 1rem;    /* 16px - texte courant */
  --font-size-lg: 1.125rem;  /* 18px - introductions */
  --font-size-xl: 1.25rem;   /* 20px - sous-titres */
  --font-size-2xl: 1.5rem;   /* 24px - h3 */
  --font-size-3xl: 1.875rem; /* 30px - h2 */
  --font-size-4xl: 2.25rem;  /* 36px - h1 */
}

[!TIP] Évitez les tailles inférieures à 12px, même pour les mentions légales. Si c'est assez important pour être écrit, c'est assez important pour être lisible.

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 (>18px ou >14px gras)
• 7:1 pour une conformité AAA

/* Bon contraste */
body {
  color: #1a1a1a;
  background-color: #ffffff;
}
/* Ratio : 16.1: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 guide sur le mode sombre accessible.

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.

Analysez la lisibilité de votre site avec RGAA Checker : notre outil vérifie les contrastes et la structure de vos contenus textuels.