Couleur de fond du mode clair : pourquoi #FFFFFF ne suffit pas, et 8 couleurs à utiliser
Un écran tout blanc n'a nulle part où mettre de la profondeur. La couleur de fond du mode clair à utiliser à la place (#F2F2F7 derrière des cartes blanches), les couleurs de texte plus douces, l'accent plus profond, et les 8 codes à remettre à votre développeur.
La meilleure couleur de fond pour le mode clair n'est pas #FFFFFF. Posez la page sur un gris doux comme #F2F2F7 et gardez le blanc pour les cartes qui reposent dessus, afin que les surfaces aient de quoi se détacher. Voici pourquoi un écran tout blanc échoue, les trois correctifs, et les huit couleurs à remettre à votre développeur.
Pourquoi un écran tout blanc devient plat
La plupart des designers commencent le mode clair en peignant tout en blanc. C'est le remplissage par défaut de tous les outils de design et le fond par défaut de tous les navigateurs, donc cela semble neutre. Ça ne l'est pas. C'est le seul choix qui vous retire la capacité de montrer de la profondeur.
Une carte doit se distinguer de la page sur laquelle elle repose. Quand les deux sont en #FFFFFF, la seule façon de les séparer est une bordure ou une ombre, et ces deux détails finissent par faire tout le travail. Ajoutez quelques cartes de plus et l'écran devient une grille de contours.
Le mode sombre a déjà résolu ça. Là, une surface plus claire veut dire une surface plus haute, donc chaque couche est un cran plus claire que celle du dessous. Notre papier sur les systèmes de couleurs du mode sombre couvre cette rampe, et le design du mode sombre couvre le reste de la palette. Le mode clair n'a pas de cran plus clair au-dessus du blanc, il lui faut donc une autre manœuvre : abaisser le sol.
Correctif 1 : démarrer la page à #F2F2F7
Page et cartes en #FFFFFF
Page #F2F2F7, cartes #FFFFFF
#F2F2F7 est le gris qu'iOS place derrière ses listes groupées. C'est le system gray 6 d'Apple en mode clair, et la recommandation d'Apple est d'utiliser les couleurs d'arrière-plan groupées pour les vues de tableau groupées. Réglages en est l'exemple classique : une page gris pâle, des lignes blanches.
Ce seul changement vous donne un sol et un plafond. La page est le sol, les cartes et les feuilles sont le plafond, et l'écart entre les deux est visible sans tracer un seul trait.
Où l'appliquer :
- L'arrière-plan de la page, derrière chaque écran qui contient des cartes, des listes ou des sections.
- Les listes groupées et les écrans de réglages, où les lignes sont blanches et les intervalles gris.
- Les champs à l'intérieur d'une carte blanche, qui peuvent prendre le gris de la page pour paraître en creux.
Si votre écran est un long article blanc sans aucune carte, le blanc convient. La règle vaut pour les interfaces faites de surfaces.
Correctif 2 : laisser les ombres faire le travail de levage
En mode sombre, l'élévation est une couleur plus claire. En mode clair, les surfaces restent blanches et c'est l'ombre qui grandit. Une carte au repos reçoit une petite ombre douce ; un menu ou une boîte de dialogue qui flotte au-dessus en reçoit une plus grande, plus douce.
Deux habitudes pour que ça rende bien :
- Teintez l'ombre avec votre encre, pas du noir pur. Une ombre dans la couleur de votre texte (le post utilisait #1B1530, un violet profond) a l'air de faire partie de l'interface. Le noir pur ressemble à une tache.
- Faites en sorte que plus grand veuille dire plus haut. Utilisez une petite échelle de quatre, du petit au grand, et associez chaque niveau à un rôle : carte, carte surélevée, menu, dialogue. Puis n'en inventez jamais un cinquième.
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
C'est la page grise qui fait marcher tout ça. Sur une page blanche, une ombre douce est presque invisible, alors on compense avec une ombre plus sombre ou une bordure. Sur #F2F2F7, une ombre légère suffit.
Correctif 3 : adoucir votre noir, puis approfondir votre accent
Un texte #000000 pur sur une page blanche ou presque blanche est plus dur que nécessaire, et il fait paraître toutes les autres couleurs faibles à côté. Material 3 règle son texte clair un cran plus doux.
Texte
Texte secondaire
Désactivé, 38 pour cent
- #1D1B20 pour le texte. C'est la couleur on-surface de Material 3. Un quasi-noir avec une pointe de violet, qui s'accorde aussi bien au blanc qu'au gris.
- #49454F pour le texte secondaire : légendes, lignes d'aide, horodatages. Il reste facile à lire, et clairement plus discret que le texte principal.
- La même encre à 38 pour cent pour les libellés et icônes désactivés. Sur blanc, cela donne #A9A8AA, et Material utilise exactement cette opacité. Le texte désactivé est le seul endroit où le faible contraste est voulu, et les WCAG l'en exemptent.
L'accent demande la correction inverse. Une couleur de marque vive et claire qui était superbe sur un écran sombre disparaît sur le blanc.
Accent clair sur blanc
Accent profond sur blanc
#BB86FC est le violet de base de Material pour les thèmes sombres. Sur blanc, il s'évanouit presque, ce qui pose problème pour tout ce qui doit se lire comme un bouton ou un lien.
#6200EE est le violet de base de Material pour les thèmes clairs, de la même famille, assez profond pour tenir sa place. Quand vous construisez un thème clair, ne réutilisez pas l'accent du thème sombre. Choisissez le cran plus profond de la même teinte.
Les 8 couleurs du mode clair
Touchez une pastille pour copier son code.
| Rôle | Valeur | À utiliser pour |
|---|---|---|
| Base | #F2F2F7 | La page, derrière les cartes et les listes groupées |
| Cartes | #FFFFFF | Cartes, feuilles, menus, lignes |
| Séparateurs | #E5E5EA | Traits entre les lignes. Pas pour les bordures de champs |
| Texte | #1D1B20 | Titres et corps |
| Secondaire | #49454F | Légendes, texte d'aide, horodatages |
| Désactivé | #A9A8AA | Libellés et icônes désactivés (texte à 38 pour cent) |
| Primaire | #6200EE | Boutons, liens, états sélectionnés |
| Erreur | #B00020 | Texte, bordures et icônes d'erreur |
#E5E5EA est le system gray 5 d'iOS, et il convient aux séparateurs parce qu'un séparateur doit seulement être remarqué, pas lu. Une bordure de champ demande davantage. Notre papier sur les placeholders et libellés donne la couleur de bordure à utiliser à la place.
À remettre à votre développeur
Les mêmes huit couleurs en propriétés personnalisées CSS :
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
Si vous livrez aussi un thème sombre, donnez à chacun de ces noms une seconde valeur sous @media (prefers-color-scheme: dark), comme dans la table de tokens du mode sombre. Les noms restent les mêmes et seules les valeurs changent, ce qui évite que le mode clair devienne un « mode sombre inversé ».
Les chiffres derrière « facile à voir »
Le post dit « facile à voir » et « difficile à voir ». Pour celui qui doit défendre le choix en revue, voici les chiffres (ratios de contraste WCAG 2, calculés sur blanc) :
| Paire | Contraste | Verdict |
|---|---|---|
| Texte #1D1B20 sur #FFFFFF | 17,1 à 1 | Bien au-dessus du minimum de 4,5 à 1 |
| Texte #49454F sur #FFFFFF | 9,3 à 1 | Confortable pour du texte secondaire |
| Désactivé #A9A8AA sur #FFFFFF | 2,4 à 1 | Exempté, le désactivé est fait pour être discret |
| #BB86FC sur #FFFFFF | 2,65 à 1 | Sous les 3 à 1 requis pour la forme d'un bouton |
| #6200EE sur #FFFFFF | 7,63 à 1 | Facile à voir |
Un fait de plus à connaître : la surface claire de Material 3 n'est pas non plus #FFFFFF. C'est #FEF7FF, un blanc à peine teinté. Même le design system que la plupart des équipes prennent comme référence ne peint pas l'écran en blanc pur.
FAQ
Quelle est la meilleure couleur de fond pour le mode clair ?
Un gris clair doux comme #F2F2F7 pour la page, avec #FFFFFF pour les cartes posées dessus. Le gris donne aux surfaces blanches de quoi se détacher, donc il vous faut moins de bordures et d'ombres.
#FFFFFF est-il une mauvaise couleur de fond ?
Pas toujours, mais un écran tout blanc ne peut pas montrer de profondeur. Les cartes se fondent dans la page, et les bordures et ombres finissent par faire tout le travail. Le blanc fonctionne mieux comme couleur des surfaces, pas de tout l'écran.
Qu'est-ce que #F2F2F7 ?
C'est le system gray 6 d'iOS en mode clair, le gris qu'Apple place derrière les listes groupées comme dans l'app Réglages. Apple recommande les couleurs d'arrière-plan groupées pour les vues de tableau groupées.
Quelle couleur de texte utiliser sur fond blanc ?
Un quasi-noir doux comme #1D1B20 pour le texte et #49454F pour le texte secondaire. Ce sont deux couleurs de Material 3, et les deux se lisent aisément sur blanc comme sur #F2F2F7.
Comment montrer l'élévation en mode clair ?
Avec des ombres. En mode sombre, une surface plus claire veut dire une surface plus haute, mais le mode clair n'a pas de cran plus clair au-dessus du blanc : les surfaces restent blanches et l'ombre grandit avec la hauteur.
La couleur d'accent doit-elle changer entre le mode clair et le mode sombre ?
Oui. Un accent clair comme #BB86FC fonctionne sur les écrans sombres mais disparaît presque sur le blanc. Utilisez un cran plus profond de la même teinte, comme #6200EE, sur les surfaces claires.
Sources
- Apple Human Interface Guidelines, Color : #F2F2F7 est systemGray6 en mode clair (R242 G242 B247), et les couleurs d'arrière-plan groupées sont prévues pour les vues de tableau groupées.
- Rôles de couleur Material 3, lus dans les ColorLightTokens et PaletteTokens d'androidx Compose : on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), surface claire #FEF7FF. Voir les rôles de couleur Material.
- Opacité de 0,38 pour les libellés et icônes désactivés, issue des component tokens de Material 3. #1D1B20 à 38 pour cent sur #FFFFFF donne #A9A8AA.
- #BB86FC et #6200EE sont les primaires de base de Material pour le sombre et le clair. #B00020 est l'erreur de base claire de Material. #E5E5EA est le system gray 5 d'iOS en mode clair.
- WCAG 2.2, 1.4.3 Contrast (Minimum) et 1.4.11 Non-text Contrast. Ratios calculés avec la formule de luminance relative des WCAG. Le texte désactivé est exempté du minimum.
- L'encre d'ombre #1B1530 et les quatre niveaux d'ombre sont notre propre recommandation, pas une valeur de plateforme.
- Publié d'abord sous forme de carrousel sur UX Brainy.
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
