Tester une palette sombre

Le thème sombre a passé la revue. Sur un écran de bureau lumineux à midi, chaque écran paraissait soigné : texte net, cartes bien rangées, l’accent de marque qui brillait joliment. Trois semaines après le lancement, les retours sont arrivés d’une autre planète — les titres en blanc pur « brillent comme un phare » la nuit, les cartes se fondent dans la page, et personne ne distingue quelle ligne du tableau est survolée. Rien dans la revue n’était malhonnête ; la revue s’est simplement déroulée dans la seule condition pour laquelle le mode sombre n’est pas fait.

Le test du mode sombre est une passe de revérification, ordonnée selon ce qui casse réellement : le contraste du texte pour chaque paire, la séparabilité des surfaces, la visibilité des états, l’éblouissement, la sûreté pour la vision des couleurs, le contenu réel à la luminosité nocturne et les médias non adaptés. Les passes du mode clair ne reportent rien — la physique change, donc chaque vérification se refait. Voici la liste de contrôle qualité pour les palettes construites dans notre guide du mode sombre : sept vérifications, chacune avec son chiffre et sa méthode.

1. Chaque paire de texte passe-t-elle toujours le contraste ?

Les seuils planchers sont identiques — 4,5:1 pour le texte courant, 3:1 pour le grand texte et les composants d’interface, selon le contraste minimum de WCAG — mais chaque ratio est nouveau, car les deux côtés de chaque paire ont changé. Un cœur de marque qui portait le texte courant sur blanc peut tomber à ≈3,3:1 sur une page quasi noire ; une bordure qui ressortait sur clair peut disparaître sur sombre.

Méthode : remesurez chaque paire texte/surface par rapport aux valeurs sombres, pas aux valeurs claires. Scale Composer redérive les rôles sémantiques par thème avec les seuils planchers imposés et l’APCA reporté en parallèle, de sorte que les paires du thème sombre arrivent comme des valeurs vérifiées plutôt que transposées.

2. Distinguez-vous les surfaces voisines ?

Les thèmes sombres signalent l’élévation par la luminosité — les surfaces surélevées sont plus claires — ce qui tasse plusieurs paliers quasi noirs dans une bande étroite. Quand deux barreaux adjacents de cette échelle sont trop proches, les cartes se fondent dans les pages et les menus dans les cartes. Le seuil à retenir : en dessous d’environ 0,02 L de séparation, deux surfaces n’en font qu’une pour la plupart des observateurs — la différence tout juste perceptible, et le point où Scale Composer déclenche son avertissement JND. Les échelles confortables sont plus larges, environ 0,04–0,09 L par barreau.

Méthode : parcourez l’échelle d’élévation de la page jusqu’à la surface la plus haute et vérifiez que chaque paire adjacente présente un ΔL ≥ ≈0,04.

Ouvrez les rôles sombres dans le panneau de contraste de Scale Composer — chaque paire de texte revérifiée avec son seuil plancher, les paliers de l’échelle de surfaces listés avec leurs valeurs de luminosité, l’APCA à côté des ratios.

3. Les états survol et pressé sont-ils toujours visibles ?

En mode clair, les états interactifs s’assombrissent d’ordinaire ; sur une surface sombre, la direction visible est vers le haut — les paliers de survol et de pression vont vers le plus clair. Un thème transposé sans inverser cette direction produit des états qui changent techniquement de valeur mais ne se lisent pas. Le calcul est le même que pour la vérification des surfaces : les paliers d’état veulent ≈0,04 L ou plus entre eux, dans la direction du plus clair.

Méthode : déclenchez le survol et la pression sur les boutons, lignes et éléments de liste du thème sombre ; confirmez que chaque palier est visible et va vers le plus clair, pas le plus sombre.

4. Le texte blanc éblouit-il ?

Le #fff pur sur une page quasi noire se situe à ≈17:1 — bien plus de contraste que n’en exige le moindre seuil plancher — et ce surplus est le problème : un texte à forte luminance sur un fond sombre est couramment signalé comme débordant ou auréolé, un effet appelé halation, surtout la nuit et pour les lecteurs astigmates. Un blanc cassé autour de L ≈0,9 mesure encore ≈13:1 — presque le triple du seuil plancher — et se lit plus calmement. Le compromis coûte une marge de sécurité dont on n’avait jamais eu besoin.

Méthode : vérifiez que le texte courant est un blanc cassé (de classe L ≈0,9), en réservant les valeurs plus vives à de petits moments délibérés — et jugez-le à faible luminosité, pas à midi.

5. Quelles paires cassent sous un déficit de vision des couleurs ?

Les thèmes sombres déplacent les combinaisons à risque : des paires qui se distinguaient par la luminosité sur blanc peuvent se retrouver à une luminosité similaire dans la plage sombre compressée, ne laissant que la teinte comme signal — précisément le signal qu’un déficit de vision des couleurs supprime. Le vert de succès contre le rouge d’erreur à L similaire est la victime classique.

Méthode : faites passer la palette sombre par les trois simulations du sélecteur Vision de Scale Composer et revérifiez spécifiquement les paires fonctionnelles.

6. Tient-elle avec du contenu réel, la nuit ?

Une revue de palette à la luminosité du jour sur du faux texte manque ce que les utilisateurs voient : le mode sombre s’utilise la nuit, à faible luminosité d’écran, où les ombres se compriment et les petits péchés de contraste deviennent du texte invisible. Le contenu réel met aussi à l’épreuve ce que les échantillons ne montrent jamais — paragraphes longs, tableaux de données denses, champs de formulaire avec texte indicatif, états désactivés.

Méthode : une passe le soir dans une pièce sombre, l’écran à faible luminosité, en lisant de vraies pages — texte long, tableaux, formulaires. C’est la condition pour laquelle le thème existe ; ce devrait être la condition dans laquelle on le juge.

7. Les images et intégrations s’accordent-elles au thème ?

La palette s’adapte ; pas les photographies. Une photo de produit ou un graphique sur fond blanc lumineux trône dans une interface sombre comme une fenêtre allumée, et les intégrations publicitaires ou iframes apportent leurs propres schémas. Le motif courant est un léger assombrissement du conteneur — une ligne de CSS comme filter: brightness(0.85) sur les conteneurs de médias en mode sombre — plus des variantes sombres pour les images que vous maîtrisez.

Méthode : parcourez chaque vue contenant des médias en mode sombre et confirmez que les éléments lumineux sont assombris, remplacés ou délibérément acceptés.

La liste, exécutable

Commencez par la vérification qui échoue en silence

Les échecs de contraste s’annoncent d’eux-mêmes ; les surfaces qui fusionnent aplatissent la conception en silence. Lancez la vérification de séparabilité des surfaces sur une échelle sombre — les paliers quasi noirs avec leurs écarts ΔL mesurés, l’avertissement JND signalant toute paire trop proche pour être distinguée, afin que les cartes qui gardaient leurs contours à midi les gardent encore à minuit.