Quand votre site définit une couleur de texte, définit-il aussi systématiquement la couleur de fond — et inversement ?
Critère officiel 10.5 — Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?
Pourquoi c'est important
Des utilisateurs malvoyants imposent leur propre schéma de couleurs (fond noir, texte blanc). Si le site définit uniquement la couleur du texte sans définir la couleur de fond, le résultat peut être un texte blanc sur fond blanc — invisible — ou un texte de la couleur de la charte sur un fond noir imposé — illisible.
Exemples concrets
Ce qui est conforme
Le thème du site définit toujours les couleurs de texte et de fond ensemble. Un utilisateur qui impose un fond sombre voit le texte s'adapter en blanc automatiquement — aucune combinaison illisible n'apparaît, quelle que soit la personnalisation.
Ce qui pose problème
Un bloc d'alerte sur la page d'accueil déclare uniquement la couleur rouge pour le texte, sans définir de couleur de fond. Un utilisateur avec un fond sombre imposé par son système d'accessibilité se retrouve avec du texte rouge sur fond noir — très difficile à lire.
Comment agir
Demandez à votre prestataire de vérifier que tous les composants du site qui définissent une couleur de texte définissent aussi une couleur de fond (et inversement). Question précise à poser : « Nos composants CSS définissent-ils toujours couleur de texte et couleur de fond ensemble, sans laisser l'un à la valeur par défaut du navigateur ? »
Règles clés
- Toujours définir color ET background-color ensemble.
- Tester avec le mode contraste élevé de Windows (Paramètres > Accessibilité > Contraste élevé).
Erreurs fréquentes
- CSS avec color défini mais background-color non défini (ou inversement)
- Sections avec fond implicite mais couleur de texte non définie
Exemples de code
couleur de texte sans fond défini
✗ Non conformebody {
color: #1a1a1a;
/* background-color non défini */
}Si l'utilisateur définit un fond sombre, le texte #1a1a1a sur fond sombre devient illisible.
paire couleur/fond définie
✓ Conformebody {
color: #1a1a1a;
background-color: #ffffff;
}Les deux couleurs sont définies ensemble. Comportement cohérent quel que soit le thème.
Référence WCAG : 1.4.3