Unités rem en CSS : Guide pour un design accessible
En Bref : L'essentiel à retenir
- Les unités rem respectent les préférences de taille de police du navigateur, contrairement aux pixels fixes.
- 1rem = la taille de police de l'élément racine (html), par défaut 16px dans les navigateurs.
- Le critère WCAG 1.4.4 exige que le texte soit redimensionnable jusqu'à 200% sans perte de fonctionnalité.
- Utilisez rem pour les tailles de police, em pour les espacements relatifs au texte, et px uniquement pour les bordures fines.
Les unités CSS que vous choisissez ont un impact direct sur l'accessibilité de votre site. Les pixels fixes ignorent les préférences utilisateur, tandis que les unités relatives comme rem permettent une expérience adaptative. Ce guide vous explique comment utiliser rem pour un design accessible.
Comprendre les unités relatives
Qu'est-ce que rem ?
rem signifie "root em" - une unité relative à la taille de police de l'élément racine (<html>). Par défaut, les navigateurs définissent cette taille à 16px.
/* Si la racine est à 16px (défaut) */
1rem = 16px
0.5rem = 8px
1.5rem = 24px
2rem = 32px
rem vs em
| Unité | Référence | Comportement |
|---|---|---|
rem | Élément <html> | Toujours prévisible |
em | Élément parent | S'accumule dans les imbrications |
/* Problème avec em : accumulation */
.parent { font-size: 1.2em; }
.parent .enfant { font-size: 1.2em; } /* = 1.44em de la racine */
.parent .enfant .petit-enfant { font-size: 1.2em; } /* = 1.728em ! */
/* Avec rem : pas d'accumulation */
.parent { font-size: 1.2rem; }
.parent .enfant { font-size: 1.2rem; } /* Toujours 1.2rem */
rem vs px
Les pixels sont fixes et ignorent les préférences utilisateur. Si quelqu'un augmente la taille de police par défaut de son navigateur, les textes en pixels restent identiques.
/* Les pixels ignorent les préférences utilisateur */
.texte-fixe { font-size: 16px; }
/* rem respecte les préférences */
.texte-adaptatif { font-size: 1rem; }
Pourquoi rem est essentiel pour l'accessibilité
Le critère WCAG 1.4.4
Le critère "Resize Text" (niveau AA) exige que le texte puisse être agrandi jusqu'à 200% sans perte de contenu ou de fonctionnalité. Les utilisateurs qui ont configuré leur navigateur pour afficher du texte plus grand s'attendent à ce que les sites respectent ce choix.
Qui en bénéficie ?
- Personnes malvoyantes
- Utilisateurs âgés
- Personnes avec des troubles de lecture
- Toute personne fatiguée ou dans un environnement difficile (soleil)
Test rapide
- Ouvrez les paramètres de votre navigateur
- Augmentez la taille de police par défaut
- Visitez votre site
- Le texte a-t-il changé de taille ?
Si non, vos tailles sont probablement en pixels.
Comment utiliser rem efficacement
Configuration de base
Ne modifiez pas la taille de police de <html> en pixels - cela casse le système de préférences utilisateur.
/* À éviter */
html { font-size: 10px; } /* Casse les préférences utilisateur */
/* Recommandé : garder le défaut ou utiliser % */
html { font-size: 100%; } /* Respecte le navigateur (16px par défaut) */
/* Alternative pour calculs simplifiés */
html { font-size: 62.5%; } /* 10px si défaut = 16px, mais respecte le ratio */
Note
Avec font-size: 62.5%, 1rem = 10px (si défaut = 16px), ce qui simplifie les conversions mentales. Mais les utilisateurs qui ont agrandi leur police verront toujours le ratio respecté.
Tailles de police
body { font-size: 1rem; } /* 16px par défaut */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
small { font-size: 0.875rem; } /* 14px */
Espacements
Utilisez rem pour les marges et paddings afin qu'ils s'adaptent proportionnellement au texte.
.card {
padding: 1.5rem;
margin-bottom: 2rem;
}
.article p {
margin-bottom: 1rem;
line-height: 1.6; /* Sans unité pour line-height ! */
}
Astuce
Utilisez notre convertisseur px vers rem pour faciliter la migration de vos feuilles de style.
Quand utiliser em
Réservez em pour les espacements qui doivent être relatifs à la taille du texte local.
/* Bouton avec padding proportionnel à SA taille de texte */
.bouton {
font-size: 1rem;
padding: 0.5em 1em; /* S'adapte si on change font-size */
}
.bouton-large {
font-size: 1.25rem;
padding: 0.5em 1em; /* Plus grand automatiquement */
}
Quand garder les pixels
Certains cas justifient l'usage de pixels :
- Bordures fines (
border: 1px solid) - Ombres (
box-shadow) - Éléments devant rester fixes quelle que soit la taille de police
.card {
border: 1px solid #ccc; /* OK en pixels */
border-radius: 0.5rem; /* rem pour cohérence */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* OK en pixels */
}
Media queries en rem
Les media queries basées sur rem s'adaptent aux préférences utilisateur.
/* En pixels : breakpoint fixe */
@media (min-width: 768px) { ... }
/* En rem : breakpoint adaptatif */
@media (min-width: 48rem) { ... }
/* = 768px si défaut, mais plus tôt si police agrandie */
Cela garantit que les utilisateurs ayant agrandi leur police obtiennent la version mobile/tablette plus tôt, avec plus d'espace pour le texte.
Migration d'un projet existant
Étape 1 : Inventaire
Listez toutes vos déclarations en pixels :
grep -r "px" ./styles/
Étape 2 : Conversion
Divisez chaque valeur par 16 (ou la taille de base) :
- 16px → 1rem
- 24px → 1.5rem
- 32px → 2rem
Étape 3 : Test
- Testez à différentes tailles de police navigateur
- Vérifiez le zoom à 200%
- Testez sur mobile
Étape 4 : Automatisation
Utilisez des outils comme PostCSS pour convertir automatiquement :
// postcss.config.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*', '!border*']
})
]
};
Bonnes pratiques résumées
| Propriété | Unité recommandée |
|---|---|
| font-size | rem |
| padding, margin | rem |
| line-height | Sans unité (ratio) |
| border | px |
| box-shadow | px |
| border-radius | rem |
| media queries | rem |
Conclusion
Adopter rem pour vos tailles de police et espacements est l'un des changements les plus impactants pour l'accessibilité de votre CSS. Cela respecte les choix des utilisateurs et garantit une expérience adaptative pour tous.
Commencez par auditer votre site avec RGAA Checker et utilisez notre convertisseur px vers rem pour faciliter votre migration vers un CSS accessible.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
L'intitulé de chaque lien doit permettre de comprendre sa destination ou sa fonction, soit par l'intitulé seul, soit par l'intitulé complété par son contexte (phrase, titre de section, item de liste ou cellule de tableau).
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.