Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?
Un utilisateur active le mode contraste élevé de Windows ou installe une extension comme Confort+. Le navigateur remplace alors les couleurs du site par ses propres valeurs — mais seulement si ces couleurs sont déclarées en paires cohérentes. Si votre CSS définit color: white sur un texte sans définir background-color, le navigateur peut conserver son fond blanc par défaut : texte blanc sur fond blanc, illisible.
Ce critère ne mesure pas le contraste — c’est le rôle des critères 3.2 et 3.3. Il vérifie uniquement que les couleurs sont déclarées par paires. Chaque fois que vous définissez color sur un élément, background-color doit être défini sur ce même élément ou déclaré explicitement sur un ancêtre. La règle est symétrique : background-color sans color correspondant pose le même problème. Un texte noir sur fond noir serait conforme 10.5 mais non-conforme 3.2.
Le test 10.5.3 couvre un cas distinct : les textes posés sur une background-image. Si l’image ne se charge pas — réseau lent, mode économie de données, fichier supprimé du serveur — le texte doit rester lisible sur le fond nu. Déclarez toujours une background-color de secours sur l’élément portant la background-image.
Pour les champs de formulaire (<input>, <select>, <textarea>), la règle est stricte : toute déclaration color doit être accompagnée d’une déclaration background-color, et inversement. Ces éléments héritent moins facilement des couleurs parentes selon les navigateurs.
3 tests pour contrôler l'implémentation correcte des couleurs en CSS
background-color associée à chaque color
Pour chaque texte dont la couleur est personnalisée par le site (hors couleurs par défaut du navigateur, comme les liens bleus) :
- Identifiez l’élément contenant ce texte.
- Ouvrez l’inspecteur de code (F12), onglet « Calculé » (Computed).
- Vérifiez que
background-coloraffiche une valeur calculée issue des styles du site.transparentdéclaré explicitement est une valeur valide. - Si la valeur calculée est présente dans les règles du site, le test est validé. Si la propriété n’est pas déclarée dans la CSS du site, le test échoue.
color associée à chaque background-color
Pour chaque texte dont la couleur est personnalisée par le site (hors couleurs par défaut du navigateur) :
- Identifiez l’élément contenant ce texte.
- Ouvrez l’inspecteur de code (F12), onglet « Calculé ».
- Vérifiez que
coloraffiche une valeur calculée issue des styles du site. - Si la valeur est présente dans les règles du site, le test est validé. Sinon, le test échoue.
Lisibilité sur background-image sans image
Pour chaque texte dont l’arrière-plan utilise une background-image :
- Repérez l’élément portant la
background-image(section hero, bandeau promotionnel, carte produit). - Dans l’inspecteur, supprimez temporairement la déclaration
background-imageou désactivez le chargement des images (DevTools > Network > bloc images). - Vérifiez que le texte reste lisible sans l’image. Une
background-colorde secours doit être déclarée sur l’élément. - Si le texte reste lisible sur le fond nu, le test est validé. Si le texte disparaît ou devient illisible, le test échoue.
Exemples
❌ Non conforme : Couleur de texte sans fond associé
<style>
.alert-message {
color: #b91c1c;
/* background-color absent */
}
</style>
<p class="alert-message">Votre session expire dans 5 minutes.</p>La couleur rouge est définie sur le texte, mais aucune background-color n’est déclarée. Quand l’utilisateur active un thème de contraste élevé, le navigateur peut imposer un fond sombre en remplacement du fond de page — et conserver le texte rouge : illisible. Le test 10.5.1 échoue car aucune valeur calculée n’est disponible pour background-color dans les styles du site.
✅ Conforme : Couleur de texte avec fond explicitement déclaré
<style>
.alert-message {
color: #b91c1c;
background-color: #fef2f2;
}
</style>
<p class="alert-message">Votre session expire dans 5 minutes.</p>Les deux propriétés sont déclarées en paire. Le navigateur dispose de la couleur de texte et de la couleur de fond pour les remplacer de manière cohérente lors d’une personnalisation utilisateur. Tests 10.5.1 et 10.5.2 validés.
❌ Non conforme : Image de fond sans couleur de secours
<style>
.hero {
background-image: url('hero-photo.jpg');
padding: 4rem 2rem;
}
.hero h1 {
color: #ffffff;
}
</style>
<section class="hero">
<h1>Découvrez notre nouvelle collection</h1>
</section>Si hero-photo.jpg ne se charge pas, la section affiche le fond blanc par défaut du navigateur. Le titre en blanc devient invisible. Aucune background-color de secours n’est déclarée : le test 10.5.3 échoue.
✅ Conforme : Image de fond avec couleur de secours déclarée
<style>
.hero {
background-image: url('hero-photo.jpg');
background-color: #1a3a5c; /* Secours si image absente */
padding: 4rem 2rem;
}
.hero h1 {
color: #ffffff;
}
</style>
<section class="hero">
<h1>Découvrez notre nouvelle collection</h1>
</section>La background-color bleue foncée garantit la lisibilité du titre blanc même si l’image ne se charge pas. Le navigateur affiche le fond bleu en lieu et place de l’image absente. Test 10.5.3 validé.
Astuces et pièges
⚠️ 10.5 conforme ne garantit pas la lisibilité
C’est l’erreur la plus fréquente en audit : color: #000; background-color: #000 est conforme au critère 10.5 (les deux valeurs sont déclarées) mais produit un texte invisible. Le contraste est évalué séparément par les critères 3.2 (texte courant) et 3.3 (composants d’interface). Ne cochez pas 10.5 comme validation de la lisibilité.
⚠️ Classes utilitaires Tailwind ou Bootstrap sans contrepartie de fond
Les classes comme text-white ou text-red-600 définissent color sans background-color. Sur un élément dont le fond n’est pas déclaré par ailleurs dans les styles du site, le test 10.5.1 échoue. Accompagnez toujours chaque classe de couleur de texte d’une classe de fond ou d’une déclaration background-color: transparent explicite.
💡 Déclarer background-color: transparent explicitement
Pour les redéfinitions de color sur des éléments dont le fond est déjà défini par un ancêtre, ajoutez background-color: transparent explicitement. L’inspecteur affichera alors une valeur calculée pour background-color dans les règles du site — ce qui valide le test 10.5.1. Sans cette déclaration, la propriété peut ne pas apparaître dans les styles du site du tout.
⚠️ Pseudo-élément ::before utilisé comme fond coloré
Certains designs utilisent ::before avec background: #FF6600 positionné en absolu pour simuler un fond derrière un texte. C’est non-conforme : le background-color est sur le pseudo-élément, pas sur l’élément contenant le texte. L’inspecteur ne trouvera pas de valeur calculée pour background-color sur l’élément textuel. Déclarez la couleur de fond directement sur l’élément et réservez ::before aux effets purement décoratifs.
⚠️ Couleurs par défaut des éléments natifs exclues du périmètre
La couleur bleue des liens <a> non visités, le texte noir sur fond blanc appliqués par le navigateur par défaut n’entrent pas dans le périmètre des tests 10.5.1 et 10.5.2. La méthodologie exclut explicitement ces couleurs par défaut. Seules les couleurs déclarées par le site dans ses propres feuilles de style sont concernées.
Questions fréquentes
Quel aspect des couleurs CSS le critère RGAA 10.5 contrôle-t-il réellement ?
Non. Le critère 10.5 vérifie uniquement que les couleurs sont déclarées par paires cohérentes — color avec background-color. Le contraste entre ces deux valeurs est évalué par les critères 3.2 (texte courant, ratio minimum 4,5:1) et 3.3 (composants d’interface, ratio minimum 3:1). Un texte noir sur fond noir est conforme 10.5 mais non-conforme 3.2.
Comment vérifier la valeur calculée de background-color dans l'inspecteur de styles ?
Ouvrez l’inspecteur (F12), sélectionnez l’élément contenant le texte coloré, puis allez dans l’onglet « Calculé » (Computed). Cherchez background-color. Ce qui compte : que la déclaration provienne bien d’une règle CSS du site, visible dans le panneau Règles (Rules). rgba(0, 0, 0, 0) et transparent déclarés explicitement sont des valeurs valides pour ce test.
Pourquoi background-color défini sur le body ne couvre-t-il pas tous les éléments enfants ?
background-color n’est pas héritable au sens CSS. Sa valeur par défaut est transparent, ce qui permet visuellement de voir le fond d’un ancêtre — mais l’élément enfant n’a pas de valeur calculée issue des styles du site. Pour être conforme, déclarez background-color: transparent explicitement sur l’élément enfant qui redéfinit color, ou affectez-lui une couleur de fond propre. La déclaration explicite est l’approche la plus sûre à l’échelle d’un projet.
Quelles règles RGAA s'appliquent spécifiquement aux couleurs des champs de formulaire ?
Oui, la règle est plus stricte pour <input>, <select> et <textarea>. Toute déclaration color doit être accompagnée d’une déclaration background-color, et inversement — sans exception. Ces éléments reçoivent un rendu natif variable selon les navigateurs et n’héritent pas fiablement des couleurs parentes. La paire doit être déclarée directement sur l’élément de formulaire.
Comment auditer efficacement le critère RGAA 10.5 sur l'ensemble d'une page web ?
Désactivez les styles CSS de la page (dans Firefox : Affichage > Style de la page > Aucun style) et vérifiez que le contenu reste structurellement lisible. Appliquez ensuite une feuille de style utilisateur forçant vos propres couleurs pour vérifier que les textes restent lisibles. Pour un audit formel, inspectez chaque élément présentant une couleur de texte personnalisée dans l’onglet Calculé et vérifiez la présence d’une valeur calculée pour background-color dans les règles du site.