L’essentiel en bref
- 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.
Sur cette page
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 présentent des options calmes au-delà du blanc, et le design en mode sombre 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.
Hex
#ffffffRessenti
À utiliser pour
#faf7f2Ressenti
À utiliser pour
#f7f1e8Ressenti
À utiliser pour
#f4f6f8Ressenti
À utiliser pour
#f1f5f4Ressenti
À utiliser pour
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.
Une ligne, un petit surtitre et un détail discret. L’espace porte autant de sens que les mots.
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, 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é explique comment le vérifier.
É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.
- 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 montre comment faire.
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.
: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.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil