Votre logo en mode sombre : la version que personne ne vous a demandée

Votre logo en mode sombre : la version que personne ne vous a demandée

Quand votre logo vous a été présenté, il était posé sur une page blanche. Vous l’avez approuvé sur une page blanche. Il vit depuis sur des documents blancs, sur un site au fond blanc, sur des cartes blanches.

Pendant ce temps, une partie grandissante de vos clients le regarde sur du noir. Personne ne leur a demandé leur avis non plus. Leur téléphone a basculé en affichage sombre, leur application de messagerie a suivi, leur lecteur de courriel aussi, et votre logo s’est retrouvé sur un fond que vous n’avez jamais validé.

Ce n’est pas un détail esthétique. C’est un fichier qui n’existe pas, et la plupart des entreprises l’apprennent en voyant une capture d’écran envoyée par un client.

Pourquoi votre logo casse-t-il sur fond noir ?

Vos appareils lisent une préférence système appelée prefers-color-scheme, définie par le World Wide Web Consortium (W3C). Quand l’utilisateur choisit le mode sombre, chaque site qui sait lire ce réglage bascule son fond en noir. Votre logo, lui, garde les couleurs prévues pour un fond blanc.

Le mécanisme est normalisé. La spécification du groupe de travail CSS du W3C la décrit ainsi : la caractéristique média prefers-color-scheme exprime la préférence de l’utilisateur pour un thème d’affichage clair ou sombre. Elle précise ensuite la valeur qui nous intéresse : la valeur sombre indique que l’utilisateur préfère un thème de couleurs foncé.

Lisez bien qui décide. Ce n’est ni vous, ni votre graphiste, ni même le site que le visiteur consulte. C’est l’utilisateur, une fois, dans les réglages de son appareil, souvent sans y penser, parfois automatiquement au coucher du soleil. Ensuite, tout ce qui sait lire cette préférence retourne son fond.

Votre fichier de logo, lui, ne retourne rien du tout. Il contient les couleurs qu’il contient. Il arrive sur un fond noir exactement tel qu’il a été dessiné pour un fond blanc.

Le premier élément qui tombe n’est pas celui qu’on croit

Quand on imagine ce problème, on pense à la couleur de la marque. En pratique, ce n’est presque jamais la couleur qui casse en premier.

C’est le texte. Dans une immense majorité de logos, le nom de l’entreprise est écrit en noir ou dans un gris très foncé, parce que c’est ce qui se lisait le mieux sur blanc. Sur un fond sombre, ce texte ne devient pas difficile à lire, il disparaît. Le symbole reste visible, le nom s’efface, et votre marque devient une forme sans identité.

Viennent ensuite trois défauts plus discrets, dans cet ordre.

Le contour. Beaucoup de logos possèdent un filet fin, souvent noir, qui sert à détacher une forme claire du fond blanc. Sur fond noir, ce filet fusionne avec le fond et la forme se met à fuir.

L’ombre portée. Elle a été ajoutée pour poser le logo sur du blanc. Sur du noir, elle produit une salissure grise autour de la marque, sans qu’on comprenne d’où elle vient.

La couleur foncée de la marque. Un bleu marine, un bordeaux profond, un vert forêt : ce sont d’excellents choix sur blanc, et ce sont des trous noirs sur fond sombre. La couleur est toujours là, techniquement. Elle n’est plus perceptible.

Là où vous le verrez, et là où vous ne le verrez jamais

Le piège de ce sujet, c’est que le propriétaire de la marque est souvent la dernière personne à constater le problème, parce qu’il travaille toute la journée sur un écran réglé en clair.

Les endroits où votre logo bascule sans vous prévenir sont pourtant ceux qui comptent : l’icône de votre application ou le raccourci de votre site sur l’écran d’accueil d’un téléphone, les aperçus de liens dans une application de messagerie, les profils et les publications dans les réseaux sociaux affichés en thème sombre, les lecteurs de documents qui proposent un mode nuit, et les interfaces professionnelles que vos clients utilisent toute la journée.

Ajoutez à cela un cas que personne n’anticipe : le logo d’un fournisseur affiché dans le tableau de bord d’un client. Vous ne contrôlez ni le fond, ni la taille, ni le moment.

La mauvaise réponse : laisser la machine inverser

La tentation est de demander une inversion automatique, ou de fournir un fichier et de laisser le logiciel se débrouiller. C’est la source des pires résultats.

Une inversion mécanique transforme votre bleu marine en un jaune pâle qui n’a rien à voir avec votre marque. Elle transforme un dégradé en bouillie. Elle inverse aussi ce qui ne devait pas l’être, par exemple une photo intégrée ou une couleur de sécurité. Vous obtenez un logo lisible et méconnaissable, ce qui est pire qu’un logo sombre et discret.

La version pour fond foncé se décide, elle ne se calcule pas.

Ce qu’est réellement une version pour fond sombre

Une bonne version sur fond foncé conserve 3 éléments et en modifie 1 seul.

Elle conserve la forme, exactement. Aucune proportion ne change, aucun élément n’est retiré. Un lecteur doit reconnaître la même marque, pas une cousine.

Elle conserve la couleur d’identité quand celle-ci tient le coup, et elle l’éclaircit d’un cran seulement quand elle ne tient plus. Un rouge vif reste souvent utilisable tel quel. Un bordeaux ne l’est presque jamais.

Elle conserve la hiérarchie, c’est-à-dire le rapport de force entre le symbole et le nom. Si le nom dominait sur blanc, il doit dominer sur noir.

Et elle modifie une seule chose : ce qui était noir devient blanc, ou un blanc très légèrement teinté pour éviter la vibration d’un blanc pur sur un noir pur. C’est tout. Le reste du travail consiste à vérifier que rien d’autre n’a bougé.

Le test qui prend 2 minutes

Vous n’avez pas besoin d’un logiciel de graphisme pour savoir si le sujet vous concerne.

Prenez votre fichier de logo, celui que vous envoyez à vos fournisseurs. Placez-le sur un fond noir dans n’importe quel outil qui permet de changer une couleur d’arrière-plan, y compris un logiciel de présentation. Regardez-le à la taille d’un pouce, pas en grand.

Posez-vous 3 questions, dans cet ordre. Est-ce que je lis encore le nom de l’entreprise ? Est-ce que les contours des formes sont encore fermés ? Est-ce que la couleur ressemble encore à ma couleur ?

Une seule réponse négative suffit. Il vous manque une version.

Ce que vous devez avoir en main

Le livrable n’est pas un fichier de plus jeté dans un dossier. C’est une paire, et elle doit être nommée pour que personne ne se trompe.

Vous devriez disposer de votre version principale pour fonds clairs et d’une version pour fonds foncés, les deux en fichier vectoriel, la seconde portant un nom explicite du type « fond foncé » plutôt qu’un suffixe numéroté. Vous devriez aussi savoir laquelle des deux s’utilise quand le fond n’est ni clair ni foncé, par exemple une photo, et la réponse est presque toujours la même : celle qui garde le nom lisible.

Si votre logo n’existe qu’en image de pixels, cette paire ne peut pas être produite proprement, parce que chaque modification de couleur dégrade un peu plus le fichier. C’est le moment de récupérer un tracé vectoriel propre, à partir duquel les deux versions dérivent du même dessin. Si vous voulez comprendre ce que recouvrent les extensions que votre fournisseur vous réclame, notre article sur les différences entre les formats JPEG, PNG, AI et EPS fait le tour de la question.

Ce que cet article ne traite pas, volontairement

2 sujets voisins sont souvent confondus avec celui-ci, et les mélanger conduit à de mauvaises décisions.

Le premier est le rectangle blanc qui traîne derrière un logo mal détouré, et le halo pâle qui apparaît autour des contours. C’est un défaut du fichier, pas une question de version. Un logo correctement détouré peut être parfaitement propre et rester totalement illisible sur fond noir, ce qui est exactement le sujet traité ici.

Le second est la déclinaison par taille, c’est-à-dire les versions simplifiées prévues pour les très petits formats. Là, ce qui change, c’est la quantité de détail. Ici, ce qui change, c’est une couleur, et rien d’autre.

La version monochrome, elle, est une troisième chose encore, utile à l’impression sur un seul ton, et notre article sur les logos monochromes explique pourquoi elle ne remplace pas une version pour fond foncé.

Le cas de l’icône, qui mérite sa propre attention

Il y a un endroit où le fond sombre et le très petit format se rencontrent, et c’est l’icône : celle de votre application, celle du raccourci de votre site sur un écran d’accueil, celle qui apparaît dans un onglet.

C’est le seul contexte où vous ne pouvez pas choisir entre les deux problèmes, parce qu’ils arrivent en même temps. Nous lui avons consacré un article distinct sur le favicon et l’icône d’application, qui traite les contraintes propres à ce format.

Quelles sont les questions fréquentes sur le logo en mode sombre ?

Une version PNG ou JPEG suffit-elle pour un logo en mode sombre ?

Non. Une image de pixels ne peut pas être modifiée sans dégrader le fichier. Il faut repartir d’un tracé vectoriel propre pour produire une version fond foncé fiable.

Le mode sombre de mon site web change-t-il aussi mon logo ?

Non, pas automatiquement. Le thème sombre d’un site est une question de code CSS ; votre fichier logo garde ses couleurs d’origine tant qu’une version fond foncé n’a pas été livrée séparément.

Faut-il refaire tout le logo pour une version fond sombre ?

Non. La forme, la couleur d’identité et la hiérarchie restent les mêmes ; seul ce qui était noir devient blanc.

Quelle version envoyer aujourd’hui à votre fournisseur ?

Votre logo n’a pas été conçu pour le fond sur lequel une partie de vos clients le regarde aujourd’hui, et ce fond a été choisi par eux, dans leurs réglages, sans que personne ne vous consulte.

La solution n’est ni un filtre, ni une inversion, ni un fichier de plus. C’est une décision de conception prise une fois, appliquée à un dessin vectoriel propre, et livrée sous une forme que vos fournisseurs ne peuvent pas confondre.

Si vous ne savez pas quelle version votre imprimeur, votre développeur ou votre fournisseur d’objets promotionnels utilise en ce moment, la réponse est simple : celle qu’il a trouvée. Notre équipe produit les déclinaisons manquantes à partir de votre logo existant, sans repartir de zéro. Voyez notre service de vectorisation si votre fichier actuel est une image de pixels, ou notre service de création de logo et d’identité visuelle si la marque elle-même est à revoir.