# Fond blanc en design : quand l’espace vide est le bon choix

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

Le fond blanc est le choix le plus courant en design, et le plus facile à rater. Voici quand il s’impose, quels blancs employer et comment éviter l’effet page blanche.

## The short version

- Un fond blanc fonctionne le mieux quand le contenu est l’essentiel : une photo produit, un long texte, une liste de prix ou un seul titre fort.
- Le blanc pur #ffffff fatigue les yeux à l’écran pour une longue lecture, c’est pourquoi la plupart des designs soignés emploient un blanc cassé légèrement chaud ou froid.
- Le noir sur blanc offre un contraste très élevé, vous pouvez donc choisir un presque noir plus doux comme #1c1917 et garder une lecture confortable.
- L’espace blanc ne paraît voulu que s’il est généreux et régulier ; une mise en page blanche à l’étroit semble inachevée plutôt que minimaliste.
- Un seul détail discret, comme un grain léger, un filet fin ou une douce lumière dans un coin, empêche le fond blanc de ressembler à un fichier vide.

Le **fond blanc en design** est le meilleur choix quand ce qui se trouve dessus mérite toute l’attention : un produit, une photographie, un long paragraphe, une seule phrase qui doit porter. Il échoue quand le blanc est choisi par défaut, car il se lit alors comme une page que personne n’a terminée. La différence tient à trois décisions : quel blanc, combien d’espace, et un petit détail qui dit au lecteur que le vide est voulu.

## Quand le fond blanc est le bon choix

Le blanc n’a pas d’humeur propre, et c’est sa force. Il s’efface. Il devient ainsi le support naturel de tout ce qui a sa propre couleur ou sa propre texture, et le pire support pour ce qui a besoin d’une atmosphère pour exister.

### Le blanc convient à

- Les photos produit où la fidélité des couleurs compte
- La lecture longue : articles, menus, conditions, rapports
- Un seul titre fort, sans rien d’autre
- Les listes de prix et les tableaux comparatifs
- Les marques fondées sur la retenue et la clarté

### Le blanc peine avec

- Les soirées, la musique et tout ce qui est nocturne
- Les photos claires et pâles qui se fondent dans la page
- Les fils où tous les concurrents utilisent déjà du blanc
- Les posts trop courts pour remplir l’espace
- Les créations qui ont besoin de chaleur ou de drame

Si votre création se trouve à droite de ce tableau, un fond de couleur douce ou un dégradé léger la servira mieux. [Les fonds minimalistes](https://gradiently.design/fr/guide/minimalist-backgrounds) présentent des options calmes au-delà du blanc, et [le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) couvre l’extrême opposé.

## Choisissez un blanc cassé, pas un blanc pur

Le `#ffffff` pur est la chose la plus lumineuse qu’un écran puisse afficher. Pour un fond de photo, c’est très bien ; pour une page lue pendant deux minutes, il éblouit. Un blanc cassé baisse légèrement la luminosité et donne une température à la page. Les blancs chauds évoquent l’imprimé, le calme et l’humain. Les blancs froids évoquent le clinique, le technique et la précision. Choisissez celui qui correspond à ce que vous vendez.

- Blanc pur: #ffffff
- Papier: #faf7f2
- Lin: #f7f1e8
- Avoine: #f5f0eb
- Nuage: #f4f6f8
- Brume: #f1f5f4
- Encre chaude: #1c1917

Cinq blancs cassés à côté du blanc pur, et un presque noir chaud à poser dessus. Les écarts semblent minimes en pastilles et sautent aux yeux sur une page entière.

| Blanc | Hex | Ressenti | À utiliser pour |
| --- | --- | --- | --- |
| Blanc pur | `#ffffff` | Lumineux, neutre | Produits détourés, fiches e-commerce |
| Papier | `#faf7f2` | Imprimé, calme | Magazines, newsletters, menus |
| Lin | `#f7f1e8` | Chaud, artisanal | Boulangeries, fleuristes, papeterie |
| Nuage | `#f4f6f8` | Froid, précis | Logiciels, finance, cliniques |
| Brume | `#f1f5f4` | Frais, net | Soin de la peau, bien-être, dentaire |

Choisissez un blanc selon sa température. Puis gardez-le partout : un site, une présentation et un post dans trois blancs différents ressemblent à trois marques.

## Laissez respirer les mots

L’espace blanc n’est pas ce qui reste. C’est une décision de mise en page, et il ne paraît voulu que s’il est généreux. Une règle pratique : des marges d’au moins 8 pour cent du petit côté, soit 86 px sur un post de 1080×1350, et plus d’espace entre les groupes qu’à l’intérieur. Un titre, une ligne courte en dessous et un petit détail en bas suffisent largement pour un post.

Un post portrait calme avec un titre court centré dans un large espace vide

Une ligne, un petit surtitre et un détail discret. L’espace porte autant de sens que les mots.

Un post portrait listant les horaires d’ouverture, avec de larges marges autour d’un court bloc de texte

Un post pratique reste calme tant que les marges restent larges et le texte petit.

La hiérarchie compte plus sur le blanc que partout ailleurs, car aucune couleur ne guide le regard. Utilisez la taille et la graisse pour classer les mots, comme l’explique [la hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy), et tenez-vous si possible à une seule famille de caractères.

## La couleur du texte sur fond blanc

Le noir pur sur blanc pur offre le contraste le plus élevé qu’un écran puisse afficher, ce qui dépasse les besoins de la lecture et peut paraître dur. Un presque noir qui reprend un peu la température du fond, comme `#1c1917` sur un blanc chaud ou `#0f172a` sur un blanc froid, franchit encore largement tous les seuils d’accessibilité. Pour le texte courant, gardez un rapport de contraste d’au moins 4,5:1 ; [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) explique comment le vérifier.

> **Le texte gris clair, l’erreur classique** Un texte gris sur un blanc cassé paraît élégant dans un fichier de design et disparaît sur un téléphone en plein soleil. Si une ligne compte, gardez-la foncée. Jouez sur la taille, pas sur la pâleur, pour rendre un texte secondaire plus discret.

## Évitez qu’un fond blanc paraisse inachevé

Le risque du blanc, c’est de ressembler à une toile vide plutôt qu’à une toile choisie. Un seul détail discret suffit à corriger cela. Choisissez-en un, pas tous.

- **Un grain léger** à très faible intensité, pour que le blanc se lise comme une surface. Voir [la texture grain](https://gradiently.design/fr/guide/textured-background).
- **Une douce lumière dans un coin**, un blanc chaud qui glisse vers une crème un peu plus profonde dans un angle.
- **Un filet fin** ou une bordure mince dans votre couleur d’encre, de quelques pixels.
- **Une couleur d’accent** employée une seule fois, sur un prix, une date ou un bouton.
- **Un rendu papier** pour les marques imprimées ou artisanales ; [la texture papier](https://gradiently.design/fr/guide/paper-texture-background) montre comment faire.

- Papier avec un coin chaud: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- Du blanc au nuage: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Brume avec lumière en haut: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Trois blancs qui sont à peine des dégradés. Sur un téléphone, ils se lisent comme un blanc avec de la profondeur, jamais comme une couleur.

## Un fond blanc en CSS

Sur le web, définissez le blanc cassé une seule fois dans une variable pour que chaque section le partage, et donnez aux images un fond assorti pour que les photos produit sur blanc pur n’apparaissent pas comme des boîtes sur votre couleur papier.

```css
:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}
```

`mix-blend-mode: multiply` donne au blanc autour d’une photo produit la couleur de la page, pour que les détourages se posent naturellement sur un blanc cassé.

Si vous voulez un rendu blanc avec un peu plus de caractère, les Marks clairs de Gradiently sont un bon point de départ : des fonds doux et pâles, avec une vraie matière et une vraie lumière, où la zone la plus calme se place derrière vos mots et où **Encre automatique** garde chaque ligne assez foncée pour être lue. Créer avec n’importe quel Mark non réservé est gratuit ; réservez celui qui vous plaît au moment d’exporter.

## FAQ

### Quel est le meilleur code couleur blanc cassé pour un fond ?

Un blanc papier chaud comme `#faf7f2` convient à la plupart des marques éditoriales et lifestyle, et un blanc froid comme `#f4f6f8` aux marques tech et médicales. Choisissez-en un et utilisez-le partout.

### Le blanc pur est-il mauvais pour un site web ?

Pas mauvais, mais lumineux. Le blanc pur est idéal derrière des produits détourés ; pour une lecture longue, un blanc cassé légèrement teinté ménage davantage les yeux.

### Quelle couleur de texte rend le mieux sur fond blanc ?

Un presque noir comme `#1c1917` ou `#0f172a`. Il se lit comme du noir, garde un contraste bien au-dessus de 4,5:1 et paraît plus doux que le noir pur.

### Comment rendre un fond blanc moins ennuyeux ?

Ajoutez un seul détail discret : un grain léger, une douce lumière dans un coin, un filet fin ou une unique couleur d’accent. Gardez des marges généreuses pour que l’espace paraisse choisi.

### Pourquoi mes photos produit forment-elles une boîte sur mon site blanc cassé ?

Les photos ont été prises sur blanc pur. Appliquez `mix-blend-mode: multiply` aux images, ou exportez-les avec un fond transparent.