Mode sombre : faut-il le proposer sur son site ?

Il est 23 heures, un client cherche votre adresse sur son téléphone. Toutes ses applications s'affichent sur fond noir, et votre site l'éblouit d'un blanc éclatant. Proposer un mode sombre évite ce contraste brutal, à condition de le préparer avec soin : un thème sombre mal réglé se lit plus mal qu'un bon thème clair.

Ce que recouvre le mode sombre

Les téléphones, les tablettes et les ordinateurs proposent un réglage d'apparence : clair, sombre, ou automatique selon l'heure. En mode sombre, les fonds blancs deviennent foncés et les textes noirs deviennent clairs, dans le système comme dans les applications qui le prennent en charge.

Un site internet peut lire ce réglage et afficher une version adaptée, sans que le visiteur ait rien à faire. Rien ne l'impose : beaucoup de sites de commerçants n'affichent qu'un seul thème, quel que soit le réglage du téléphone. On lit parfois que le fond sombre économise la batterie ; c'est exact sur les écrans de type OLED, mais pour une visite de quelques minutes, le gain reste modeste.

Suivre le réglage du téléphone, ou proposer un bouton

Le réglage automatique

La solution la plus simple pour le visiteur consiste à suivre son choix. Le site prévoit deux palettes de couleurs, et le navigateur affiche celle qui correspond à l'apparence de l'appareil. Le client qui a tout passé en sombre retrouve votre site dans la même ambiance que le reste de son téléphone.

Le bouton de bascule

Certains sites ajoutent un bouton, souvent une lune et un soleil, pour changer de thème à la main. Il rend service à ceux qui préfèrent un fond clair pour lire un long texte, même le soir. Le choix est alors mémorisé dans le navigateur du visiteur. La CNIL range les traceurs qui retiennent un choix de présentation demandé par l'utilisateur parmi ceux qui peuvent être dispensés de consentement, sous des conditions détaillées sur cnil.fr.

Quand le navigateur s'en mêle

Certains navigateurs ou réglages de téléphone assombrissent d'office les sites qui ne prévoient rien. Le résultat est parfois étrange : couleurs inversées, logo méconnaissable, boutons devenus illisibles. Votre prestataire peut indiquer dans le code les thèmes que le site prend en charge, ce qui limite ces transformations automatiques.

Une palette pensée pour le fond sombre

Inverser les couleurs ne suffit pas. Un thème sombre lisible repose sur sa propre palette, qui garde l'identité du thème clair :

• Le fond : un gris très foncé ou un bleu nuit est souvent préféré au noir absolu, sur lequel un texte d'un blanc pur paraît dur.
• Le texte : un blanc légèrement cassé convient mieux. Un texte clair sur fond foncé paraît plus épais : une graisse un peu plus fine et un interligne généreux l'allègent.
• La couleur d'accent : un bleu ou un rouge très saturés, parfaits sur fond blanc, deviennent criards sur fond noir. Prévoyez une nuance plus claire et plus douce de la même teinte pour les boutons et les liens.
• Le contraste : testez chaque couple de texte et de fond avec un vérificateur de contraste gratuit, comme pour le thème clair. Les textes secondaires en gris moyen sont souvent les premiers à devenir illisibles.

Les bases d'une palette, du fond à la couleur d'accent, sont présentées dans l'article sur la charte graphique d'un site. Le mode sombre en demande simplement une seconde version, à valider avec le même soin que la première.

Logo, photos et modules extérieurs

Le logo et les icônes

Un logo noir sur fond transparent disparaît presque sur un fond foncé. Prévoyez une version claire, ou posez le logo sur un petit fond qui le met en valeur. Les pictogrammes, les icônes de réseaux sociaux et les plans dessinés demandent la même vérification.

Les photos

Les photos d'ambiance supportent très bien le fond sombre. Les photos de produits détourés sur fond blanc forment en revanche des rectangles éblouissants : un encadré aux angles arrondis ou une luminosité légèrement réduite en mode sombre les intègre mieux à la page.

Les modules extérieurs

Le module de réservation, le bloc d'avis, la carte ou la page de paiement viennent souvent d'un autre service et restent en couleurs claires. Une fenêtre blanche au milieu d'une page noire surprend. Regardez si chaque outil propose un thème sombre ; sinon, encadrez-le proprement pour que la rupture paraisse voulue.

Quand l'effort en vaut la peine

Un second thème double une partie du travail : deux palettes, deux versions du logo, chaque page à vérifier deux fois, au lancement comme à chaque évolution. Il se justifie surtout dans quelques cas :

• une activité consultée le soir, comme un bar, un restaurant de nuit ou une discothèque, dont les clients cherchent la carte ou l'adresse dans la pénombre ;
• un site que l'on ouvre souvent, à la manière d'une application : commande en ligne, espace client, réservations ;
• une refonte en cours : prévoir la palette sombre au moment de créer la charte demande moins de travail que de l'ajouter après coup.

Pour un site vitrine de quelques pages, un thème clair bien contrasté, qui reste correct quand le navigateur force le sombre, suffit dans la plupart des cas. Mieux vaut un seul thème soigné que deux thèmes approximatifs. La lisibilité reste la priorité : l'article sur l'accessibilité d'un site internet en rappelle les règles de base.

Par où commencer

1. Passez votre téléphone en mode sombre et parcourez votre site : logo, boutons, formulaires, modules extérieurs. Notez ce qui disparaît ou éblouit.
2. Si le navigateur transforme votre site d'office, demandez à votre prestataire de déclarer les thèmes pris en charge.
3. Si vous préparez une refonte, demandez dès le départ une palette sombre et une version claire du logo, puis chiffrez le projet avec le configurateur de devis.