# Évitez le noir pur en mode sombre. Le texte blanc sur noir pur fatigue les yeux et efface la profondeur. Préférez un gris sombre, des surfaces éclaircies et des couleurs adoucies. https://laithjunaidy.com/fr/writing/stop-using-pure-black-in-dark-mode Par Laith Aljunaidy. Publié: 2026-05-29. Dernière mise à jour: 2026-09-22. --- Le mode sombre n'est plus un réglage de niche, et la plupart des thèmes sombres choisissent le mauvais noir. Le noir pur, #000000, paraît affirmé dans un nuancier mais devient éprouvant à l'écran. Si votre thème fait plisser les yeux, c'est souvent la raison. Google l'a appris en développant [Material Design](https://m2.material.io/design/color/dark-theme.html) et recommande une surface gris sombre, #121212. Ce choix tient au fonctionnement de l'œil et à la perception de la profondeur dans l'obscurité. Voici les règles qui comptent en pratique. ## À retenir - Partez d'un gris sombre proche de #121212, la base recommandée par Material Design, plutôt que de #000000. - Le texte blanc sur noir pur produit le contraste maximal d'un écran. Il crée des halos et fatigue les yeux, surtout en cas d'astigmatisme. - Créez la profondeur avec la lumière. Dans un thème sombre, une surface plus haute est plus claire. - Désaturez et éclaircissez les couleurs de marque, puis vérifiez de nouveau le contraste. Une couleur lisible sur blanc peut échouer sur fond sombre. - Le mode sombre exige sa propre conception et ses propres règles. Ce n'est pas un simple filtre. ## Pourquoi éviter le noir pur par défaut ? Il pousse le contraste au-delà de ce qui aide à lire. Le blanc sur noir pur est le contraste maximal d'un écran, et l'œil en paie le prix. La lumière déborde sur les contours des lettres, créant un halo particulièrement gênant pour les personnes astigmates. Material Design le précise aussi : [un texte clair sur gris sombre présente moins de contraste que sur noir](https://m2.material.io/design/color/dark-theme.html), et ce gris réduit la fatigue visuelle. Ce problème touche chaque lecteur qui active le thème, pendant de longues séances de lecture, et finit par fatiguer. Le confort est la raison d'être du mode sombre. Le contraste maximal le compromet discrètement. ## Quelle couleur choisir pour le fond ? Un gris sombre. Material Design recommande #121212 comme surface de base, et c'est un bon départ. Il reste sombre et soigné tout en facilitant la lecture. Le noir pur devient un accent occasionnel plutôt que le fond de toute l'interface. Il existe un vrai compromis. Sur les écrans OLED, les pixels noirs s'éteignent et économisent de l'énergie, ce qui explique le choix de #000000 dans certaines applications. Mais vos surfaces contiennent des photos lumineuses, des cartes colorées et des visuels de marque vifs. Sur noir pur, leur contraste devient brutal. Pour un contenu que l'on lit ou regarde plus d'un instant, ce faible gain de batterie ne justifie pas la fatigue. ## Comment créer de la profondeur sans ombres ? Éclaircissez une surface pour la faire paraître plus haute. Dans un thème clair, l'ombre indique l'élévation. Dans l'obscurité, elle disparaît faute de surface où se projeter. Material résout ce problème en éclaircissant les surfaces à mesure qu'elles montent. Plus la couche est haute, plus elle tend vers le blanc. Techniquement, une couche blanche translucide se superpose à la base #121212. Son opacité augmente avec l'élévation. Retenez surtout la règle : plus haut signifie plus clair. Elle redonne les niveaux qu'un fond noir uniforme ferait disparaître. Material publie les valeurs : | Élévation | Opacité de la couche blanche | | :- | :- | | 0 dp | 0% | | 1 dp | 5% | | 2 dp | 7% | | 3 dp | 8% | | 4 dp | 9% | | 6 dp | 11% | | 8 dp | 12% | | 12 dp | 14% | | 16 dp | 15% | | 24 dp | 16% | *Source : [Material Design, thème sombre](https://m2.material.io/design/color/dark-theme.html).* ## Et les couleurs de marque ? Adoucissez-les. Des couleurs saturées qui fonctionnent sur blanc vibrent sur un fond sombre et fatiguent l'œil. Désaturez-les, éclaircissez-les et calmez-les. L'objectif est une lecture confortable. Vérifiez ensuite le contraste, car le mode sombre change les conditions. Une couleur de texte qui respectait le [seuil WCAG AA de 4.5 to 1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) sur blanc peut échouer sur fond sombre. Testez ce thème séparément : la surface et les calculs diffèrent. ## Le mode sombre exige sa propre conception Ce n'est pas un filtre ajouté à la fin. C'est une seconde conception du même produit, avec son fond, son modèle de profondeur et ses couleurs. Choisissez un gris sombre proche de #121212, éclairez les surfaces pour les surélever, adoucissez les couleurs et vérifiez chaque contraste. Rien de compliqué, mais c'est ce qui distingue un thème où l'on reste d'un thème que l'on quitte. Ces petites règles expliquent largement la facilité d'une interface. Pour un autre exemple à fort impact, voyez ci-dessous comment [la loi de Fitts](https://laithjunaidy.com/fr/writing/fitts-law-bigger-and-closer) rend les boutons faciles ou difficiles à atteindre. ## Questions fréquentes ### Faut-il utiliser du noir pur en mode sombre ? Non. Le blanc sur noir pur crée un contraste maximal, des halos et de la fatigue visuelle, surtout en cas d'astigmatisme. Utilisez un gris sombre proche de #121212 et réservez le noir pur à quelques accents. ### Quelle couleur choisir pour le fond d'un mode sombre ? Un gris sombre proche de #121212 constitue une bonne base. Éclaircissez légèrement les surfaces élevées, car les ombres ne peuvent pas créer la profondeur dans l'obscurité. ### Comment utiliser les couleurs de marque en mode sombre ? Désaturez-les et éclaircissez-les. Les couleurs saturées adaptées au blanc vibrent sur fond sombre. Un contraste suffisant sur blanc peut devenir insuffisant : vérifiez de nouveau la lisibilité du texte.