Taille de police et accessibilité : les critères RGAA à respecter

La taille de police est un élément fondamental de l'accessibilité web, pourtant souvent mal comprise par les développeurs et designers. Contrairement à une idée répandue, le RGAA ne fixe pas de taille minimale obligatoire. Alors, comment garantir une typographie accessible conforme au référentiel français ?

Ce que dit le RGAA sur la taille de police

Le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) adopte une approche pragmatique : plutôt que d'imposer une taille fixe, il met l'accent sur la scalabilité et la lisibilité relative du texte à travers plusieurs critères de la thématique 10 "Présentation de l'information".

Pas de minimum obligatoire, mais des recommandations

Le RGAA n'impose pas de taille de police minimale. Cependant, la communauté de l'accessibilité s'accorde sur une recommandation de 16 pixels (1em ou 1rem) comme base minimale pour le texte courant.

[!NOTE] La taille de 16px correspond à la taille par défaut des navigateurs. C'est pourquoi 1rem équivaut généralement à 16px si vous n'avez pas modifié la taille de base sur l'élément html.

Critère RGAA 10.4 : Agrandissement du texte

Le critère RGAA 10.4 (niveau AA) est fondamental pour la typographie accessible :

"Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ?"

Concrètement, ce critère exige que :

Le texte puisse être agrandi jusqu'à 200% sans technologie d'assistance
L'agrandissement ne provoque pas de perte de contenu ou d'information
Toutes les fonctionnalités restent utilisables
Le texte ne soit pas tronqué et reste lisible

Cela signifie que vos mises en page doivent supporter le zoom navigateur et le redimensionnement du texte sans casser l'interface.

Critère RGAA 10.5 : Modification de l'espacement du texte

Le critère RGAA 10.5 (niveau AA) va plus loin en exigeant que l'utilisateur puisse personnaliser l'espacement :

"Dans chaque page web, les déclarations CSS de propriétés de police de caractères sont-elles correctement implémentées ?"

L'utilisateur doit pouvoir appliquer ces modifications sans perte de contenu :

Hauteur de ligne : jusqu'à 1.5 fois la taille de la police
Espacement des paragraphes : jusqu'à 2 fois la taille de la police
Espacement des lettres : jusqu'à 0.12 fois la taille de la police
Espacement des mots : jusqu'à 0.16 fois la taille de la police

Les unités de mesure : un choix crucial

Le choix des unités CSS impacte directement la conformité RGAA de votre typographie.

Unités relatives recommandées

Pour satisfaire les critères 10.4 et 10.5, privilégiez :

rem : Relative à la taille de police racine (html)
em : Relative à la taille de l'élément parent
% : Pourcentage de la taille parente

Ces unités permettent aux utilisateurs d'ajuster la taille du texte via les paramètres de leur navigateur ou système d'exploitation.

Unités absolues à éviter

Les pixels (px) et points (pt) posent problème car ils ne respectent pas toujours les préférences utilisateur sur certains navigateurs anciens. Bien que les navigateurs modernes gèrent mieux le zoom sur les pixels, les unités relatives restent la meilleure pratique pour garantir la conformité RGAA.

[!TIP] Utilisez notre vérificateur de conformité RGAA pour tester automatiquement le comportement de votre site au zoom 200%.

Taille de police et contraste selon le RGAA

Les critères RGAA 3.2 et 3.3 établissent une distinction entre le texte standard et le "texte agrandi" qui influence les exigences de contraste.

Définition du texte agrandi

Selon le RGAA, un texte est considéré comme "agrandi" si :

Il fait 24px (environ 18pt) ou plus en graisse normale
Il fait 18.5px (environ 14pt) ou plus en gras (700+)

Ratios de contraste exigés

Type de texte	Critère RGAA	Ratio minimum
Texte standard	3.2 (AA)	4.5:1
Texte agrandi	3.2 (AA)	3:1
Texte standard	3.3 (AAA)	7:1
Texte agrandi	3.3 (AAA)	4.5:1

Cette distinction permet une certaine flexibilité pour les titres et textes proéminents tout en maintenant la lisibilité.

Bonnes pratiques pour une typographie conforme RGAA

Hiérarchie visuelle claire

Établissez une échelle typographique cohérente avec des unités relatives :

CODE

:root {
  --text-xs: 0.75rem;   /* 12px - utiliser avec parcimonie */
  --text-sm: 0.875rem;  /* 14px - texte secondaire */
  --text-base: 1rem;    /* 16px - texte courant */
  --text-lg: 1.125rem;  /* 18px - mise en avant */
  --text-xl: 1.25rem;   /* 20px - sous-titres */
  --text-2xl: 1.5rem;   /* 24px - titres (texte agrandi) */
}

Espacement flexible (critère 10.5)

Assurez-vous que votre CSS supporte les modifications d'espacement :

CODE

body {
  line-height: 1.5;        /* Interligne de base */
  letter-spacing: normal;  /* Pas de valeur fixe restrictive */
  word-spacing: normal;    /* Permet la personnalisation */
}

p {
  margin-bottom: 1.5em;    /* Espacement des paragraphes en em */
}

[!WARNING] Évitez les hauteurs fixes (height) sur les conteneurs de texte. Utilisez min-height pour permettre l'expansion lors de l'agrandissement.

Choix de la police

Au-delà de la taille, la lisibilité dépend aussi de la police choisie :

Privilégiez les polices sans empattement (sans-serif) pour les écrans
Évitez les polices décoratives pour le contenu principal
Assurez-vous que la police distingue clairement les caractères similaires (I, l, 1, O, 0)

Tester la conformité RGAA de votre typographie

Test du critère 10.4 (zoom 200%)

Utilisez Ctrl/Cmd + pour zoomer jusqu'à 200%
Vérifiez qu'aucun texte n'est tronqué ou masqué
Confirmez que la navigation reste fonctionnelle
Testez le défilement horizontal (il ne devrait pas être nécessaire pour le texte)

Test du critère 10.5 (espacement)

Utilisez un bookmarklet ou une extension comme "Text Spacing" pour appliquer les modifications d'espacement maximales et vérifier qu'aucun contenu n'est perdu.

Vérification du contraste (critères 3.2 et 3.3)

Utilisez notre vérificateur de contraste pour vous assurer que vos combinaisons couleur-taille respectent les ratios RGAA.

Critères RGAA concernés

Critère	Niveau	Exigence
10.4	AA	Texte lisible à 200% de zoom
10.5	AA	Modification de l'espacement sans perte de contenu
3.2	AA	Contraste suffisant (4.5:1 ou 3:1 selon taille)
3.3	AAA	Contraste renforcé (7:1 ou 4.5:1 selon taille)

Conclusion

L'accessibilité typographique selon le RGAA ne se limite pas à choisir une "bonne" taille de police. Elle repose sur un ensemble de critères : capacité d'agrandissement (10.4), flexibilité de l'espacement (10.5), et contraste adéquat (3.2, 3.3).

En adoptant les unités relatives et en évitant les conteneurs à hauteur fixe dès la conception, vous créez une expérience de lecture confortable pour tous, y compris les personnes malvoyantes, les seniors, ou simplement les utilisateurs en situation de fatigue visuelle.

Pour vérifier la conformité RGAA complète de votre site, lancez un audit gratuit qui analysera notamment la structure de vos textes, le comportement au zoom et les contrastes.