Logo sur fond dégradé : comment le garder lisible

Pour poser un logo sur fond dégradé sans qu’il disparaisse, utilisez une version monochrome du logo, placez-la dans la partie la plus calme du dégradé, là où le contraste est le plus fort, et laissez un espace libre autour. Un logo en couleurs partage souvent des teintes avec le dégradé et s’y dissout. Une version blanche ou foncée, placée là où le dégradé est le plus sombre ou le plus clair, reste nette à toutes les tailles.

La suite de ce guide explique pourquoi les logos disparaissent, quelles versions préparer, comment trouver le bon emplacement et comment le vérifier, avec le CSS pour le faire sur le web.

Pourquoi les logos disparaissent sur les dégradés

Un fond uni n’a qu’une couleur : un logo contraste avec lui ou non. Un dégradé en a beaucoup. Un logo blanc parfaitement net sur l’extrémité sombre d’un fondu peut s’effacer complètement sur l’extrémité claire, et un logo en couleur peut ressembler tellement au milieu du dégradé que ses contours se brouillent.

La leçon : ne jugez jamais un logo par rapport au dégradé entier. Jugez-le par rapport aux quelques pixels juste derrière lui.

Préparez les versions de logo dont vous aurez besoin

La plupart des problèmes de logo sur dégradé se règlent avant même d’ouvrir un fichier, en ayant les bonnes versions sous la main. Rangez-les ensemble dans votre kit de marque pour que personne n’improvise. Si le logo est lui-même en dégradé, lisez d’abord les logos en dégradé : un logo en dégradé sur un fond en dégradé fonctionne rarement.

Trouvez la zone de contraste et vérifiez-la

Les WCAG, la norme d’accessibilité du web, exemptent les logos de leurs règles de contraste du texte. Cette exemption concerne la conformité, pas la visibilité. Leur minimum de 3:1 pour les éléments graphiques porteurs de sens est un plancher pratique : en dessous, un logo commence à perdre ses contours. Voici comment le vérifier.

1. 1

   Placez le logo grossièrement

   Mettez-le là où la mise en page le veut, souvent un coin ou le haut au centre.

2. 2

   Prélevez les couleurs derrière lui

   Utilisez une pipette sur le pixel le plus clair et le plus sombre juste derrière le logo. Sur un dégradé, ils peuvent être très différents, même sur une petite zone.

3. 3

   Testez les deux face à la couleur du logo

   Passez chaque paire dans un vérificateur de contraste comme celui de WebAIM. Visez au moins 3:1 face au pire des deux, et davantage pour les petits logos.

4. 4

   Déplacez, ne rafistolez pas

   En cas d’échec, déplacez le logo vers l’extrémité plus sombre ou plus claire du dégradé, ou passez à l’autre version monochrome, avant de recourir à un cadre ou à une ombre.

5. 5

   Vérifiez-le en petit

   Réduisez la création à la taille d’une vignette. Si le logo devient une tache, utilisez-y la version symbole seul.

Notre guide sur le contraste des couleurs explique les ratios plus en détail, et le texte sur un dégradé traite du même problème pour les titres.

Où placer un logo sur un dégradé

Cherchez la zone où le dégradé change le moins. Un logo posé à cheval sur un changement brusque de couleur semble assis entre deux fonds. Les coins sont souvent calmes, car beaucoup de dégradés font leur fondu le plus spectaculaire au milieu. Laissez au logo un espace libre de chaque côté, au moins la hauteur d’une de ses lettres, pour que le dégradé l’encadre au lieu de l’étouffer.

Dans Gradiently, un Mark sait où se trouvent vos mots et votre logo : sa zone la plus calme et la plus contrastée se déplace derrière eux et le détail chargé se détend autour, si bien que vous avez rarement à chercher le bon emplacement à la main. Les logos de votre kit de marque se déposent directement dans n’importe quelle création.

En réserve, plein ou sur une plaque

Il y a trois façons de poser un logo sur de la couleur, et chacune convient à un dégradé différent.

Poser un logo sur un dégradé CSS

Sur le web, dessinez le logo en SVG intégré qui utilise currentColor, pour qu’une seule couleur CSS fasse passer de la version blanche à la version foncée. Placez-le ensuite dans le coin où le dégradé est le plus sombre. Avec un dégradé à 135 degrés, c’est en haut à gauche que se trouve la première couleur.

.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}