Mode sombre et palettes de couleurs accessibles: bien faire

Le rapport de contraste mesure la différence de luminosité relative entre la couleur du texte et celle du fond; 1:1 signifie aucune différence, 21:1 est aussi net que du noir sur blanc. La norme WCAG considère 4,5:1 comme minimum pour un texte normal, et 3:1 pour un grand texte (18 points gras ou plus, ou 24 points normal) (W3C WCAG 2.1).

Pas besoin de calculer cela à la main; le vérificateur de contraste des outils de développement du navigateur, ou l'un des outils en ligne gratuits, donne un rapport instantané une fois les couleurs entrées. Un fond gris foncé avec un texte gris moyen est une erreur fréquente sur le thème sombre d'un fabricant de groupes électrogènes; le rapport tombe généralement sous 3:1, et la lisibilité en pâtit.

Une couleur de marque qui paraît vive sur fond clair peut paraître terne, ou tout aussi souvent, agressivement lumineuse sur fond sombre; la même valeur ne rend pas pareil sur les deux fonds. C'est pourquoi le mode sombre a besoin de sa propre variante de la couleur de marque, pas d'une copie exacte du même code.

Le rouge de marque d'un club sportif, net sur blanc, peut ressembler à une enseigne néon sur noir et fatiguer les yeux; une version à saturation légèrement réduite garde la marque reconnaissable sans cette fatigue.

Le mode sombre ne s'arrête pas à la couleur de fond et de texte; les ombres, les bordures, les icônes et les fonds derrière les images méritent tous un second regard. Une carte séparée par une ombre subtile sur fond clair peut disparaître entièrement sur fond sombre; une bordure fine fait alors le travail que faisait l'ombre.

Les images posent un problème à part: une photo produit sur fond blanc peut ressembler à une boîte blanche gênante sur une page sombre; la solution consiste soit en une version à fond transparent, soit en un cadre doux ajouté autour.

Avant toute mise en ligne, chaque paire texte-fond a besoin de son propre test de contraste, et les éléments fonctionnels comme les boutons, les étiquettes de formulaire et les messages d'erreur ne devraient pas être oubliés. Si le message d'erreur d'un formulaire est un rouge à faible contraste, un visiteur peut le manquer complètement et soumettre le formulaire plusieurs fois sans comprendre pourquoi.

• Chaque paire texte/fond passée dans un vérificateur de contraste
• Une variante de mode sombre distincte définie pour la couleur de marque
• Images et icônes vérifiées séparément dans les deux modes
• Bascule automatique selon la préférence système (prefers-color-scheme) testée

Pas chaque site; mais pour un public qui utilise un produit technique (un logiciel, une application, un tableau de bord), les attentes sont élevées. Un site vitrine peut laisser le mode sombre de côté en priorité, auquel cas l'effort est mieux investi à bien régler le contraste du mode clair, car l'accessibilité n'est pas une question propre au seul mode sombre.

Marquer un champ invalide uniquement en rouge peut ne rien signifier pour un visiteur daltonien; une part non négligeable de la population présente une forme de daltonisme rouge-vert. La couleur devrait toujours être accompagnée d'une icône ou d'un texte, jamais porter le message seule.

Si un indicateur de stock affiche «en stock» en vert et «épuisé» en rouge sans étiquette d'accompagnement, cette information n'atteint jamais certains visiteurs; ajouter une petite icône ou un court libellé texte évite que la couleur soit le seul signal porteur.

Une fois qu'un visiteur passe du mode sombre au mode clair à la main, ce choix devrait être conservé lors de sa prochaine visite; revenir à la préférence système à chaque chargement de page est un moyen facile d'agacer le visiteur. La préférence réside dans le stockage local du navigateur et est relue à chaque chargement de page.

Sans cette mémorisation sur le site d'un studio de jeux vidéo, un visiteur doit refaire le même réglage à chaque visite; un détail technique mineur, mais un point de friction qui se répète.

Plutôt que de s'appuyer uniquement sur le stockage local, le réglage peut aussi vivre comme une préférence de compte côté serveur; pour un visiteur connecté, cela conserve le choix d'un appareil à l'autre.