Commencez par un choix utilisateur et un système de jetons
Utilisez le réglage système comme valeur par défaut avec prefers-color-scheme. Si vous proposez un interrupteur, utilisez un contrôle accessible au clavier avec un nom accessible et exposez le choix actif de manière programmatique. Donnez la préséance à la sélection manuelle dans ce contexte de navigation ; ne promettez pas qu'elle suive l'utilisateur sur un autre appareil ou en session privée.
Nommez les couleurs par rôle, pas par apparence : canvas, surface, texte, texte atténué, bordure, lien, accent, erreur, succès, focus et désactivé. Cartographiez chaque rôle dans les deux thèmes. Cela évite qu’un gris prévu pour le clair ne s’infiltre en mode sombre et rend les corrections réutilisables. Le sombre n’est pas intrinsèquement plus accessible ni universellement préféré ; c’est une autre expérience à rendre utilisable.
Documentez un ordre, comme le choix enregistré en premier puis la préférence système en second, afin que les équipes testent le même résultat.
Incluez les états hover, focus, sélectionné, invalide, désactivé, en chargement, vide et lien visité, pas seulement les valeurs par défaut.
Mesurez le contraste dans le thème rendu
Le critère de réussite 1.4.3 de WCAG 2.2 impose un minimum de 4,5:1 pour le texte normal et les images de texte, et 3:1 pour le texte large. Ne faites pas d’arrondi : 4,499:1 ne satisfait pas 4,5:1. Les graisses fines peuvent paraître plus faibles que leur couleur calculée, utilisez donc une police plus robuste ou un espacement supplémentaire.
Vérifiez chaque premier-plan rendu et l’arrière-plan adjacent. Le texte sur des photos, des dégradés, des panneaux translucides ou des vidéos a des arrière-plans changeants, donc un seul calcul de jeton ne peut pas prouver sa lisibilité. Utilisez un fond opaque, un recouvrement suffisant ou un placement différent, puis inspectez aux tailles de fenêtre réalistes.
Selon le critère 1.4.11 de WCAG 2.1, l'information visuelle nécessaire pour identifier un contrôle actif, un état requis ou un graphique signifiant doit atteindre 3:1 par rapport aux couleurs adjacentes.
Associez les changements de couleur à du texte, une icône, un motif, une position ou un autre repère clair ; les états d'erreur et de sélection ne doivent pas dépendre d'une teinte subtile.
Protégez le focus clavier, les formulaires et les changements d'état
Parcourez au clavier les deux thèmes. Le focus doit être visible sur les liens, boutons, champs, menus, dialogues, widgets personnalisés et le contrôle de thème. Ne supprimez pas l'outline du navigateur à moins que son remplacement soit testé sur chaque surface et état. Un contour décalé est souvent plus clair qu'une lueur qui se fond.
La Focus Appearance de WCAG 2.2 est un critère AAA, pas une preuve qu’un site satisfait le niveau AA. C'est toutefois un objectif utile : une zone indicatrice au moins aussi grande qu'un périmètre de 2 pixels CSS et un contraste de 3:1 entre les pixels focalisés et non focalisés. Vérifiez aussi que les états erreur, requis, sélectionné et indisponible conservent leur sens.
Testez séparément l'indice d'entrée, la valeur saisie, l'étiquette, le texte d'aide, le texte d'erreur, la bordure invalide, la coche de case à cocher, la sélection de radio et l'état de soumission.
Pour le checkout ou un autre flux réglementé, utilisez un bac à sable du fournisseur et obtenez une revue d'accessibilité et de sécurité qualifiée quand c'est approprié. Il s'agit d'orientation éducative, pas d'une évaluation de conformité ou de sécurité.
Gérez les images, les assets intégrés et l'UI fournie par le navigateur
Passez en revue logos, illustrations, captures d'écran, graphiques, icônes et texte incrusté dans les images dans les deux thèmes. Un logo clair réutilisé peut disparaître et une légende de graphique peut échouer même si le HTML environnant est conforme. Fournissez un asset adapté au but ou un fond stable. Les images qui transmettent des instructions, un statut ou des données doivent rester compréhensibles.
Déclarez la prise en charge des schémas clair et sombre, puis stylisez le contenu de la page pour le thème sélectionné. La propriété color-scheme aligne le canvas du navigateur, les barres de défilement, les contrôles de formulaire et d'autres UI du navigateur. Placez les métadonnées correspondantes tôt dans le document. Le SVG intégré peut répondre au schéma parent ; testez bout en bout les iframes et widgets tiers.
Privilégiez les contrôles HTML sémantiques. Le comportement forced-color utilise des sémantiques natives, pas un rôle ARIA ajouté à un élément générique.
Inspectez les états téléchargés, mis en cache, à chargement lent et d'image en échec, surtout là où du texte ou des indices d'action se trouvent sur des médias.
Respectez forced-colors et testez la version comme un système
Le mode forced-colors applique une palette limitée choisie par l'utilisateur, comme le « High Contrast » de Windows. Les navigateurs peuvent remplacer les couleurs, supprimer les ombres et ajouter des backplates au texte. Ne bloquez pas l'override. Faites des corrections ciblées lorsqu'un composant perd sa délimitation ou son sens, par exemple une bordure réelle là où une ombre portait l'affordance. L'émulation ne peut représenter tous les appareils, navigateurs, extensions, niveaux de zoom ou combinaisons d'aides techniques.
Exécutez la matrice de routes et d'interactions en mode clair, sombre et forced-colors avant la mise en production. Chrome DevTools peut émuler les deux conditions ; utilisez-le pour accélérer la revue, puis naviguez manuellement dans les flux prioritaires. Les scanners trouvent des candidats mais ne peuvent pas déterminer l'accessibilité seuls. SIU effectue des pré-vols des assets et interactions critiques du thème, enregistre une condition de passage pour la sortie et conserve un chemin de rollback testé pour les régressions sévères de présentation ; ce n'est pas de la surveillance de disponibilité (downtime monitoring).
Incluez landing, navigation, recherche, accès au compte, formulaires, pages d'erreur, écrans authentifiés et flux de conversion de contenu.
Sauvegardez les URL testées, les versions de navigateur, les paramètres, les exceptions, le propriétaire et le déclencheur de rollback afin que la correction parte des faits.