Couleur des séparateurs en UI : pourquoi un séparateur n'est pas #000000
Une ligne noire pure entre des lignes de liste crie plus fort que les mots qu'elle sépare. Utilisez #C6C6C8 en clair, #38383A en sombre, 1 px, en retrait jusqu'au texte, et essayez l'espace avant de tracer la moindre ligne.
La bonne couleur de séparateur est un gris clair doux comme #C6C6C8, tracé sur 1 px et en retrait jusqu'au texte, pas une ligne noire pure. Un séparateur sert à distinguer des lignes, et un séparateur noir devient l'élément le plus bruyant de la liste. Voici les quatre correctifs, avec les valeurs pour les écrans clairs et sombres.
Pourquoi les séparateurs noirs crient
Personne ne choisit un séparateur noir exprès. Une ligne tracée sans réfléchir sort en #000000, et elle le reste jusqu'à ce que quelqu'un la change.
Le problème, c'est le contraste. Le noir pur sur blanc est l'association la plus forte qu'un écran puisse afficher, et le texte de vos lignes est généralement un peu plus doux. La ligne passe donc avant les mots. L'œil lit d'abord les traits, puis va chercher le contenu entre eux.
Un séparateur est un indice, pas une vedette. Son rôle est d'être repéré par l'œil quand c'est nécessaire et ignoré le reste du temps.
Correctif 1 : éclaircir les lignes
Lignes #000000
Lignes #C6C6C8
iOS dessine ses séparateurs de liste en #C6C6C8 sur blanc, soit la couleur de séparateur système semi-transparente posée sur un fond blanc. Material 3 arrive au même endroit avec #CAC4D0, son jeton outline variant, à 1 dp.
Ligne noire
Séparateur iOS
Séparateur Material 3
12 % de noir sur blanc
Si votre fond n'est pas un blanc uni, utilisez une valeur alpha plutôt qu'un gris fixe. Les recommandations de Material décrivent les séparateurs comme du noir à 12 % dans les thèmes clairs et du blanc à 12 % dans les thèmes sombres. #000000 à 12 % sur blanc donne #E0E0E0, et sur une surface teintée il reste teinté, donc la ligne n'a jamais l'air collée.
Le même correctif s'applique hors des listes : filets de lignes de tableau, pieds de carte, trait sous un en-tête et filet entre les groupes d'un menu.
Correctif 2 : les mettre en retrait jusqu'au texte
Pleine largeur
Commence au texte
Ouvrez Réglages sur un iPhone et regardez. Le trait commence au libellé, pas sous l'icône. Material dit la même chose : les séparateurs en retrait séparent des contenus liés, et ils s'associent à des éléments d'ancrage comme les avatars.
Ce retrait est ce qui attache une icône à sa ligne. Un trait pleine largeur sous l'icône la détache, et la liste se lit comme des rayures au lieu de lignes.
Depuis iOS 16, les listes SwiftUI alignent par défaut chaque séparateur sur le bord de début du texte de la ligne, pas sur son icône. Si vos lignes n'ont ni icône ni avatar, il n'y a rien autour de quoi mettre en retrait, et un trait pleine largeur convient très bien.
Correctif 3 : essayer l'espace d'abord
Un trait par ligne
L'espace s'en charge
Avant de sortir une ligne, demandez-vous à quoi elle sert. Souvent, c'est du regroupement, et le regroupement peut se faire avec de la distance. Material liste des alternatives aux séparateurs pleine largeur : espace blanc, sous-titres et séparateurs en retrait, et prévient que l'abus des pleine largeur crée du bruit visuel. Refactoring UI avance le même argument sous « use fewer borders » : séparez les choses avec de l'espace, une couleur de fond ou une ombre.
Un test rapide : supprimez tous les traits de votre liste. Si vous voyez encore les groupes, les traits n'étaient que de la décoration.
Correctif 4 : les atténuer aussi en sombre
#FFFFFF sur #1C1C1E
#38383A sur #1C1C1E
La règle ne change pas en mode sombre, elle s'inverse. Sur un écran clair, le trait est un peu plus sombre que la surface, et sur un écran sombre il est un peu plus clair.
iOS utilise #38383A sur son fond de liste sombre. Material 3 utilise #49454F, son outline variant sombre, sur une surface #141218.
Les traits blanc pur posent le même problème que les noirs purs : ce sont les marques les plus lumineuses de la liste, donc elles battent le texte.
La spec des séparateurs
Touchez une pastille pour copier son code.
| Propriété | Valeur | Pourquoi |
|---|---|---|
| Couleur, clair | #C6C6C8 | Visible quand on regarde, discret quand on lit |
| Option alpha | #000000 à 12 % | S'adapte à toute surface, donne #E0E0E0 sur blanc |
| Épaisseur | 1 px (1 dp) | Les traits plus épais deviennent des formes |
| Retrait | Commence au texte | Garde icônes et avatars rattachés à leurs lignes |
| Couleur, sombre | #38383A | Un peu plus clair que la surface, jamais blanc |
| Espace | À essayer d'abord | Regrouper sans rien dessiner |
Passez ça à votre développeur
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
Le margin-left sur la bordure est le retrait : le trait commence là où commence le libellé. Si vous utilisez l'approche alpha, remplacez la variable par rgba(0, 0, 0, 0.12) en clair et rgba(255, 255, 255, 0.12) en sombre.
FAQ
Quelle couleur pour les séparateurs ?
Un gris clair doux sur écran clair, comme le #C6C6C8 d'iOS ou le #CAC4D0 de Material 3. Sur écran sombre, utilisez un gris foncé légèrement plus clair comme #38383A.
Les séparateurs doivent-ils être noirs ?
Non. Une ligne noire pure est la marque au plus fort contraste de la liste, donc l'œil la lit avant le contenu. Utilisez un gris clair ou du noir à environ 12 % d'opacité.
Quelle épaisseur pour un séparateur ?
1 px, soit 1 dp dans Material. Les traits plus épais se transforment en formes et font concurrence aux lignes.
Qu'est-ce qu'un séparateur en retrait ?
Un séparateur qui commence au texte de la ligne plutôt qu'au bord de l'écran, afin de ne pas couper sous une icône ou un avatar. Les Réglages d'iOS l'utilisent pour chaque liste.
Faut-il des séparateurs entre chaque ligne ?
Pas toujours. Un écart plus grand entre les groupes sépare souvent le contenu sans rien dessiner, et Material prévient que l'abus de séparateurs pleine largeur crée du bruit visuel.
Quelle couleur de séparateur fonctionne en mode sombre ?
#38383A sur le fond de liste sombre d'iOS et #49454F sur la surface sombre de Material 3. Évitez le blanc, car les traits vifs éblouissent sur les écrans sombres.
Sources
- Material Design 2, Dividers : les séparateurs font 1 dp d'épaisseur, en noir à 12 % dans les thèmes clairs ou en blanc à 12 % dans les thèmes sombres ; les séparateurs en retrait séparent des contenus liés et fonctionnent avec des éléments d'ancrage comme les avatars ; les alternatives aux séparateurs pleine largeur incluent l'espace blanc, les sous-titres et les séparateurs en retrait ; l'abus de séparateurs pleine largeur crée du bruit visuel.
- Material 3 tokens : le séparateur utilise la couleur outline variant avec une épaisseur de 1,0 dp ; la valeur de base est #CAC4D0 dans le schéma clair et #49454F dans le schéma sombre. #141218 est la surface sombre de base.
- Apple, listRowSeparatorLeading et Adjust List Row Separator Insets : depuis iOS 16, les listes alignent par défaut chaque séparateur sur le bord de début du texte de la ligne.
- Couleurs de séparateur iOS : en clair rgba(60, 60, 67, 0.29), qui se pose sur blanc comme #C6C6C8, et #38383A en sombre. L'app Réglages sur iPhone montre le retrait.
- #000000 à 12 % sur #FFFFFF donne #E0E0E0, calculé par mélange alpha.
- Refactoring UI, « Use fewer borders » (Adam Wathan et Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast : un séparateur entre des lignes de liste est de la décoration, non nécessaire pour comprendre le contenu, donc aucun contraste minimum ne s'applique.
- Les lignes de Réglages et les détails de l'événement « Design review » sont inventés pour cette page.
- Publié d'abord sous forme de carrousel sur UX Brainy.
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
