Trennlinienfarbe in der UI: Warum Trennlinien nicht #000000 sind
Eine reinschwarze Linie zwischen Listenzeilen ist lauter als die Wörter, die sie trennt. Nimm #C6C6C8 auf Hell, #38383A auf Dunkel, 1 px, eingerückt bis zum Text, und probiere erst Abstand, bevor du überhaupt eine Linie ziehst.
Die richtige Trennlinienfarbe ist ein weiches, helles Grau wie #C6C6C8, 1 px dick und bis zum Text eingerückt, keine reinschwarze Linie. Eine Trennlinie soll Zeilen trennen, und eine schwarze wird zum lautesten Element der Liste. Hier sind die vier Korrekturen, mit den Werten für helle und dunkle Screens.
Warum schwarze Trennlinien schreien
Niemand wählt absichtlich eine schwarze Trennlinie. Eine Linie, die man gedankenlos zieht, wird #000000, und so bleibt sie, bis jemand sie ändert.
Das Problem ist der Kontrast. Reines Schwarz auf Weiß ist die stärkste Kombination, die ein Screen zeigen kann, und dein Zeilentext ist meist ein wenig weicher. Also sticht die Linie die Wörter aus. Das Auge liest zuerst die Linien und sucht dann den Inhalt dazwischen.
Eine Trennlinie ist ein Hinweis, kein Feature. Ihr Job ist es, vom Auge gefunden zu werden, wenn es nötig ist, und die restliche Zeit ignoriert zu werden.
Fix 1: Die Linien aufhellen
#000000-Linien
#C6C6C8-Linien
iOS zeichnet seine Listentrennlinien auf Weiß in #C6C6C8, der halbtransparenten System-Trennfarbe, umgerechnet auf weißen Hintergrund. Material 3 landet am gleichen Punkt mit #CAC4D0, seinem Outline-Variant-Token, bei 1 dp.
Schwarze Linie
iOS-Trennlinie
Material-3-Trennlinie
12 % Schwarz auf Weiß
Ist dein Hintergrund nicht schlicht weiß, nimm einen Alphawert statt eines festen Grautons. Die Material-Richtlinien beschreiben Trennlinien als 12 % Schwarz in hellen Themes und 12 % Weiß in dunklen Themes. #000000 mit 12 % über Weiß ergibt #E0E0E0, und über einer getönten Fläche bleibt die Linie getönt, sodass sie nie aufgeklebt wirkt.
Dieselbe Korrektur gilt auch außerhalb von Listen: Tabellenzeilenlinien, Card-Footer, die Linie unter einem Header und die Linie zwischen Menügruppen.
Fix 2: Bis zum Text einrücken
Volle Breite
Beginnt am Text
Öffne auf einem iPhone die Einstellungen und schau hin. Die Linie beginnt am Label, nicht unter dem Icon. Material sagt dasselbe: Eingerückte Trennlinien trennen zusammengehörige Inhalte und passen zu Ankerelementen wie Avataren.
Diese Einrückung bindet ein Icon an seine Zeile. Eine Linie in voller Breite unter dem Icon schneidet es los, und die Liste liest sich als Streifen statt als Zeilen.
Seit iOS 16 richten SwiftUI-Listen jede Trennlinie standardmäßig an der Vorderkante des Zeilentextes aus, nicht am Icon. Haben deine Zeilen kein Icon und keinen Avatar, gibt es nichts, um das man einrücken müsste, und eine Linie in voller Breite ist in Ordnung.
Fix 3: Erst Abstand probieren
Eine Linie pro Zeile
Abstand erledigt es
Bevor du zur Linie greifst, frag dich, wofür sie da ist. Oft geht es ums Gruppieren, und Gruppieren geht auch mit Distanz. Material nennt Alternativen zu Vollbreite-Trennlinien: Weißraum, Subheader und eingerückte Trennlinien, und warnt, dass zu viele Vollbreite-Linien visuelles Rauschen erzeugen. Refactoring UI argumentiert genauso unter „use fewer borders": Trenne Dinge durch Abstand, eine Hintergrundfarbe oder einen Schatten.
Ein schneller Test: Lösche alle Linien in deiner Liste. Wenn du die Gruppen immer noch siehst, waren die Linien Dekoration.
Fix 4: Auch auf Dunkel dimmen
#FFFFFF auf #1C1C1E
#38383A auf #1C1C1E
Die Regel ändert sich im Dark Mode nicht, sie kehrt sich um. Auf einem hellen Screen ist die Linie etwas dunkler als die Fläche, auf einem dunklen etwas heller.
iOS nutzt #38383A auf seinem dunklen Listenhintergrund. Material 3 nutzt #49454F, seine dunkle Outline Variant, auf einer #141218-Fläche.
Reinweiße Linien haben dasselbe Problem wie reinschwarze: Sie sind die hellsten Striche der Liste und schlagen deshalb den Text.
Die Trennlinien-Spezifikation
Tippe auf einen Chip, um den Code zu kopieren.
| Eigenschaft | Wert | Warum |
|---|---|---|
| Farbe, hell | #C6C6C8 | Sichtbar, wenn du hinschaust, ruhig, wenn du liest |
| Alpha-Option | #000000 mit 12 % | Passt sich jeder Fläche an, ergibt auf Weiß #E0E0E0 |
| Stärke | 1 px (1 dp) | Dickere Linien werden zu Formen |
| Einrückung | Beginnt am Text | Hält Icons und Avatare an ihren Zeilen |
| Farbe, dunkel | #38383A | Etwas heller als die Fläche, nie weiß |
| Abstand | Zuerst probieren | Gruppieren, ohne etwas zu zeichnen |
Gib das deinem Entwickler
: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 */
}
Das margin-left am Border ist die Einrückung: Die Linie beginnt dort, wo das Label beginnt. Wenn du den Alpha-Ansatz nutzt, ersetze die Variable durch rgba(0, 0, 0, 0.12) auf Hell und rgba(255, 255, 255, 0.12) auf Dunkel.
FAQ
Welche Farbe sollten Trennlinien haben?
Ein weiches, helles Grau auf hellen Screens, etwa iOS' #C6C6C8 oder Material 3s #CAC4D0. Auf dunklen Screens nimm ein etwas helleres dunkles Grau wie #38383A.
Sollten Trennlinien schwarz sein?
Nein. Eine reinschwarze Linie ist der kontrastreichste Strich in der Liste, also liest das Auge sie vor dem Inhalt. Nimm ein helles Grau oder Schwarz mit etwa 12 % Deckkraft.
Wie dick sollte eine Trennlinie sein?
1 px, in Material 1 dp. Dickere Linien werden zu Formen und konkurrieren mit den Zeilen.
Was ist eine eingerückte Trennlinie?
Eine Trennlinie, die am Text der Zeile statt am Bildschirmrand beginnt, sodass sie nicht unter einem Icon oder Avatar durchschneidet. Die iOS-Einstellungen nutzen sie für jede Liste.
Brauche ich Trennlinien zwischen jeder Zeile?
Nicht immer. Ein größerer Abstand zwischen Gruppen trennt Inhalte oft, ohne dass etwas gezeichnet wird, und Material warnt, dass zu viele Trennlinien in voller Breite visuelles Rauschen erzeugen.
Welche Trennlinienfarbe funktioniert im Dark Mode?
#38383A auf iOS' dunklem Listenhintergrund und #49454F auf Material 3s dunkler Fläche. Vermeide Weiß, denn helle Linien blenden auf dunklen Screens.
Quellen
- Material Design 2, Dividers: Trennlinien sind 1 dp dick, mit 12 % Schwarz in hellen Themes oder 12 % Weiß in dunklen Themes; eingerückte Trennlinien trennen zusammengehörige Inhalte und funktionieren mit Ankerelementen wie Avataren; Alternativen zu Vollbreite-Trennlinien sind Weißraum, Subheader und eingerückte Trennlinien; zu häufige Vollbreite-Trennlinien erzeugen visuelles Rauschen.
- Material 3 tokens: Die Trennlinie nutzt die Outline-Variant-Farbe bei 1,0 dp Stärke; der Basiswert ist #CAC4D0 im hellen und #49454F im dunklen Schema. #141218 ist die dunkle Basisfläche.
- Apple, listRowSeparatorLeading und Adjust List Row Separator Insets: Seit iOS 16 richten Listen jede Trennlinie standardmäßig an der Vorderkante des Zeilentextes aus.
- iOS-Trennlinienfarben: hell rgba(60, 60, 67, 0.29), was auf Weiß als #C6C6C8 erscheint, und #38383A auf Dunkel. Die Einstellungen-App auf dem iPhone zeigt die Einrückung.
- #000000 mit 12 % über #FFFFFF ergibt #E0E0E0, berechnet per Alpha-Blending.
- Refactoring UI, „Use fewer borders" (Adam Wathan und Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast: Eine Trennlinie zwischen Listenzeilen ist Dekoration und für das Verständnis des Inhalts nicht nötig, daher gilt dafür kein Mindestkontrast.
- Die Einstellungszeilen und die Details des Events „Design review" sind für diese Seite erfunden.
- Zuerst veröffentlicht als Karussell auf 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
