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

[Canonical HTML page](https://gradiently.design/fr/guide/logo-on-gradient-background)

Un dégradé change de couleur sur toute sa largeur : un logo lisible à un bout peut disparaître à l’autre. Voici comment choisir la version, l’emplacement et la couleur pour que cela n’arrive jamais.

## The short version

- Un logo sur fond dégradé fonctionne le mieux en version monochrome, blanche ou foncée, plutôt que dans sa version originale en couleurs.
- Comme un dégradé change de luminosité d’un endroit à l’autre, vérifiez le contraste à l’endroit exact où se trouve le logo, pas sur tout le fond.
- Les WCAG exemptent les logos de leurs règles de contraste, mais leur minimum de 3:1 pour les éléments graphiques porteurs de sens est un plancher raisonnable pour qu’un logo reste reconnaissable.
- Placez le logo dans la zone la plus calme et la plus uniforme du dégradé, souvent un coin, et gardez un espace libre autour.
- Toute marque devrait avoir prêtes ses versions de logo en couleurs, blanche et foncée avant de concevoir sur des dégradés.

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.

Minuit, violet puis rose poudré: `linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)`

Un logo blanc se lit clairement sur le tiers gauche, moins bien au milieu, et disparaît presque à droite. Un logo foncé fait l’inverse. Aucun des deux ne fonctionne partout sur ce dégradé.

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](https://gradiently.design/fr/guide/brand-kit) pour que personne n’improvise. Si le logo est lui-même en dégradé, lisez d’abord [les logos en dégradé](https://gradiently.design/fr/guide/gradient-logo) : un logo en dégradé sur un fond en dégradé fonctionne rarement.

| Version | À utiliser sur | Remarques |
| --- | --- | --- |
| En couleurs | Fonds blancs, blanc cassé ou très pâles | La version de référence. Rarement adaptée à un dégradé. |
| Monochrome blanc | Dégradés sombres et moyennement sombres | La version la plus utile pour travailler sur des dégradés. |
| Monochrome foncé | Dégradés clairs et pastel | Prenez un presque noir de votre palette plutôt qu’un noir pur s’il paraît dur. |
| Une couleur de marque | Dégradés neutres ou très pâles | Seulement si la couleur de marque contraste avec chaque pixel derrière elle. |
| Symbole seul | Petites tailles, avatars, coins | Garde sa forme là où un logotype deviendrait trop petit pour être lu. |

Cinq versions couvrent presque tous les dégradés. Le monochrome blanc et le monochrome foncé font l’essentiel du travail.

## 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. **Placez le logo grossièrement** Mettez-le là où la mise en page le veut, souvent un coin ou le haut au centre.
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. **Testez les deux face à la couleur du logo** Passez chaque paire dans un vérificateur de contraste comme [celui de WebAIM](https://webaim.org/resources/contrastchecker/). Visez au moins 3:1 face au pire des deux, et davantage pour les petits logos.
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. **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](https://gradiently.design/fr/guide/color-contrast-accessibility) explique les ratios plus en détail, et [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) 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.

Une création carrée avec le logotype Northlight posé sur un dégradé animé, la texture traversant les lettres

Le logotype sur la partie la plus chargée du fond : ses contours s’adoucissent là où la couleur change.

La même création carrée où le dégradé derrière le logotype Northlight est plus calme et plus uniforme, pour des lettres bien nettes

Le même logotype avec la zone la plus calme déplacée derrière lui : des contours nets, sans cadre.

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.

### Logo monochrome plein

- Le logo est d’une seule couleur unie, blanche ou foncée
- Fonctionne sur presque tous les dégradés s’il est placé dans la bonne zone
- Le choix par défaut pour les posts et les bannières
- Reste net une fois compressé

### En réserve ou sur plaque

- En réserve : le logo est découpé dans une forme pleine, et le dégradé apparaît à travers les lettres
- Sur plaque : le logo repose sur une petite forme pleine, comme un badge
- Les deux garantissent le contraste sur des dégradés très chargés
- Les deux ajoutent une forme à la création : utilisez-les exprès, pas comme un pansement

## 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.

```css
.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;
}
```

Un SVG, deux versions. La couleur suit le dégradé, et non l’inverse.

> **Oubliez l’ombre portée** Une ombre douce derrière un logo est le pansement le plus courant, et elle en a généralement l’air : un halo gris sur un fond coloré. Déplacez d’abord le logo ou changez de version.

## FAQ

### Quelle couleur de logo fonctionne le mieux sur un fond dégradé ?

En général une version monochrome : blanche sur les dégradés sombres ou moyennement sombres, et un presque noir de votre palette sur les dégradés clairs ou pastel. Les logos en couleurs ont tendance à se fondre dans le dégradé.

### Où placer un logo sur un dégradé ?

Dans la zone la plus calme et la plus uniforme, avec le contraste le plus fort, souvent un coin, avec un espace libre autour d’au moins la hauteur d’une de ses lettres.

### Les logos doivent-ils respecter des exigences de contraste ?

Les WCAG exemptent les logos de leurs règles de contraste du texte, mais prendre leur minimum de 3:1 pour les éléments graphiques porteurs de sens comme plancher garde un logo reconnaissable.

### Faut-il mettre une ombre ou un cadre derrière mon logo ?

Essayez d’abord de déplacer le logo ou de passer à la version blanche ou foncée. Cadres et ombres fonctionnent mais ajoutent du bruit visuel ; utilisez une plaque ou une réserve assumée si vous en avez besoin.

### Qu’est-ce qu’un logo en réserve ?

Un logo en réserve est découpé dans une forme pleine, si bien que le fond, ici le dégradé, apparaît à travers les lettres.