Les pièges du contraste en mode sombre

Prenez les couleurs de premier plan d’un thème clair auquel vous faites confiance — le bleu de marque, les deux gris de texte, le blanc cassé qui ne sert jamais, le blanc pur — et re-mesurez chacune contre une page presque noire au lieu d’une page blanche. Les chiffres ne se dégradent pas uniformément ; ils se réordonnent. Le gris de texte secondaire qui passait avec de la marge tombe à ≈2,5:1. Le bleu de marque qui portait les boutons chute à ≈3,3:1. Et les deux valeurs qui étaient inutilisables sur blanc — le blanc cassé et le blanc pur — affichent les résultats les plus forts de la colonne.

Le contraste en mode sombre repose sur les mêmes planchers — 4,5:1 pour le texte courant, 3:1 pour le grand texte et les composants d’interface — mais la géographie des échecs se déplace : les valeurs de luminosité moyenne qui avaient de la marge sur blanc s’effondrent contre le presque-noir, les couleurs de marque saturées passent sous les planchers, et la plage utilisable pour le texte est comprimée par le bas par le manque de séparation et par le haut par l’éblouissement. Chaque paire doit être re-mesurée sur le fond sombre, et lue en gardant la polarité à l’esprit, car le ratio seul ne peut pas voir quel côté est le texte. Cet article cartographie où les échecs se relocalisent ; comment une palette sombre est dérivée pour que ses valeurs arrivent pré-vérifiées est le sujet plus large de notre guide du mode sombre.

Les exigences de contraste WCAG changent-elles en mode sombre ?

Non. Le minimum de contraste de WCAG demande les mêmes 4,5:1 sur le texte courant et 3:1 sur le grand texte et les composants d’interface, quel que soit le thème affiché. La formule est symétrique — elle divise la luminance la plus claire par la plus sombre et compare le résultat au plancher — donc elle ne sait pas, et ne se soucie pas, que la page est devenue sombre.

Ce qui change, c’est quelles de vos valeurs peuvent encore franchir la barre. Cet ensemble s’avère être presque l’opposé de celui du thème clair, et c’est pourquoi un thème sombre n’hérite presque rien des vérifications du thème clair : non pas parce que la norme s’est resserrée, mais parce que les deux côtés de chaque paire ont bougé.

Pourquoi les couleurs de tons moyens échouent-elles sur fond sombre ?

Parce que sur une page sombre, le texte doit apporter toute la lumière lui-même. Sur blanc, le fond fournit le contraste — sa luminance est proche du maximum, donc tout premier plan suffisamment sombre passe, et les valeurs éligibles s’étalent sur la moitié de l’échelle de luminosité. Contre le presque-noir, les rôles s’inversent : la page ne contribue presque rien, le ratio est piloté par la luminance propre du premier plan, et la luminance chute abruptement au milieu de la plage de luminosité. Un ton moyen n’émet tout simplement pas assez pour se détacher.

L’arithmétique des gris neutres rend la compression concrète. Sur une page blanche, un gris passe le texte courant à n’importe quelle luminosité jusqu’à L ≈0,57 en OKLCH — tout, du noir au gris moyen, fonctionne. Sur une page presque noire à L ≈0,22, un gris a besoin de L ≈0,61 ou plus pour atteindre 4,5:1, et l’extrémité confortable s’arrête autour de L ≈0,9–0,95, là où l’éblouissement prend le dessus. La bande qui passe rétrécit d’environ la moitié et se relocalise entièrement vers l’extrémité claire — et les deux bandes ne se chevauchent pas : contre ces deux fonds, aucun neutre unique ne peut porter le texte courant dans les deux thèmes.

Où les mêmes couleurs passent-elles et échouent-elles ?

Cinq premiers plans, deux fonds. La page claire est blanche ; la page sombre est oklch(0.22 0.015 262.9) ≈ #171B22, un presque-noir de classe neutral-900.

La ligne du bleu est celle qui surprend les équipes. #2563eb est oklch(0.546 0.215 262.9) : vif, saturé — et de luminosité moyenne. La saturation n’ajoute aucune luminance, donc une couleur peut être aussi intense que le gamut le permet et rester quand même au milieu de l’échelle, ce qui est exactement là où les fonds sombres sont impitoyables. Le bleu qui ancrait les boutons et passait comme texte sur blanc arrive sur le presque-noir comme une valeur qui ne peut légalement pas porter le texte courant. Ce n’est pas un défaut de la couleur ; c’est la géographie qui se déplace sous elle.

Ouvrez ces paires dans Scale Composer — les mêmes cinq premiers plans vérifiés contre la page sombre, chacun avec son ratio WCAG et son score APCA côte à côte, les lignes en échec marquées par rapport à leurs planchers.

Le clair-sur-sombre est-il le même contraste que le sombre-sur-clair ?

Pas pour l’œil. Le ratio WCAG est aveugle à la polarité par construction — échangez le texte et l’arrière-plan et le chiffre est identique — mais la perception n’est pas symétrique. À ratio mesuré égal, un texte clair sur fond sombre se lit généralement plus fort : les traits lumineux irradient dans le champ sombre au lieu d’y être contenus. Le même effet est dur pour les polices fines — la lueur mange les traits filiformes — et c’est pourquoi les thèmes sombres réclament souvent une graisse de texte un peu plus solide que ce que leurs ratios mesurés suggèrent.

APCA, le modèle de contraste émergent, note la polarité explicitement : il utilise des courbes différentes pour chaque direction et signe négativement les résultats clair-sur-sombre. Les deux modèles peuvent être en désaccord sur l’ordre, pas seulement sur l’ampleur. Le texte secondaire du thème clair ci-dessus — le gris à L ≈0,47 sur blanc — mesure ≈6,8:1 et obtient ≈Lc 84 en APCA. Le texte secondaire du thème sombre — le gris à L ≈0,78 sur presque-noir — mesure ≈8,6:1, un ratio plus élevé, et obtient pourtant ≈Lc 62, nettement plus bas. Le ratio classe la paire sombre comme plus forte ; APCA la classe comme plus faible. Aucun des deux chiffres n’est une erreur — ils modélisent des choses différentes — et APCA est aujourd’hui un instrument de niveau recherche plutôt qu’une exigence de conformité. C’est l’argument pour lire les deux, et c’est pourquoi Scale Composer rapporte l’APCA à côté de chaque ratio WCAG qu’il vérifie.

Un thème sombre peut-il avoir trop de contraste ?

Passé un certain point, oui — le mode sombre est l’endroit où « plus de contraste, c’est mieux » cesse d’être vrai de façon éclatante. Le blanc pur sur presque-noir franchit tous les planchers à ≈17:1, et ce surplus est le problème : les traits à forte luminance sur un champ sombre ont tendance à déborder et à créer un halo, un effet souvent rapporté comme pire la nuit et pour les lecteurs astigmates. Un blanc cassé autour de L ≈0,9 mesure encore ≈13:1 — près du triple du plancher du texte courant — et se lit plus calmement. Les planchers sont des planchers, pas des cibles ; rien dans la norme ne récompense les quatre derniers points de ratio, et l’œil les facture.

L’exemption pour le texte désactivé s’applique-t-elle toujours ?

Oui — les contrôles désactivés et les éléments inactifs ne portent aucune exigence de contraste dans l’un ou l’autre thème. Ce qui change, c’est à quelle vitesse « atténué » glisse vers « disparu ». Près d’une page sombre, les dénominateurs sont minuscules, donc de petits déplacements de luminosité font bouger le ratio fortement : un gris désactivé à L ≈0,45 se situe à ≈2,3:1 — faible mais repérable — tandis que le descendre à L ≈0,38 laisse ≈1,7:1, ce que la plupart des yeux manqueront tout simplement sur un écran peu lumineux. Sur blanc, le même écart de 0,07 en L se remarque à peine. Les valeurs désactivées et de substitution (placeholder) sur fond sombre méritent d’être choisies délibérément plutôt qu’héritées, exemption ou non.

Revérifiez la géographie, pas l’habitude

Les habitudes qui faisaient passer une palette claire sont celles qui échouent ici, et c’est pourquoi la vérification doit s’exécuter sur les valeurs sombres elles-mêmes. Comparez WCAG et APCA sur une palette sombre — chaque paire de texte et d’interface re-mesurée sur le fond sombre, les deux chiffres côte à côte, pour que les paires qui ont échangé de place dans le tableau ci-dessus soient visibles dans vos propres couleurs avant leur mise en production.