Hintergrundfarbe im Light Mode: Warum #FFFFFF nicht reicht und 8 Farben, die du nutzen solltest
Ein komplett weißer Screen hat keinen Platz für Tiefe. Die Hintergrundfarbe für den Light Mode (#F2F2F7 hinter weißen Karten), die weicheren Textfarben, der tiefere Akzent und die 8 Codes für deine Entwickler.
Die beste Hintergrundfarbe für den Light Mode ist nicht #FFFFFF. Setz die Seite auf ein weiches Grau wie #F2F2F7 und heb Weiß für die Karten auf, die darauf liegen, damit Flächen etwas haben, aus dem sie herausragen. Hier steht, warum ein komplett weißer Screen scheitert, die drei Fixes und die acht Farben für deine Entwickler.
Warum ein komplett weißer Screen flach wirkt
Die meisten Designer starten den Light Mode, indem sie alles weiß anmalen. Es ist die Standardfüllung in jedem Design-Tool und der Standardhintergrund in jedem Browser, also fühlt es sich neutral an. Ist es nicht. Es ist die eine Entscheidung, die dir die Möglichkeit nimmt, Tiefe zu zeigen.
Eine Karte muss sich von der Seite unterscheiden, auf der sie liegt. Sind beide #FFFFFF, bleiben nur Rahmen oder Schatten zur Trennung, und diese zwei Details müssen die ganze Arbeit leisten. Kommen ein paar Karten dazu, wird der Screen zu einem Raster aus Umrissen.
Der Dark Mode hat das längst gelöst. Dort bedeutet eine hellere Fläche eine höhere, jede Ebene ist also einen Schritt heller als die darunter. Unser Beitrag über Farbsysteme im Dark Mode behandelt diese Abstufung, und Dark-Mode-Design den Rest der Palette. Der Light Mode hat über Weiß keine hellere Stufe, also braucht er einen anderen Zug: den Boden tiefer legen.
Fix 1: Starte die Seite bei #F2F2F7
Seite und Karten beide #FFFFFF
Seite #F2F2F7, Karten #FFFFFF
#F2F2F7 ist das Grau, das iOS hinter gruppierten Listen verwendet. Es ist Apples System Gray 6 im Light Mode, und Apples eigene Empfehlung lautet, die Hintergrundfarben für Gruppen bei gruppierten Tabellenansichten zu nutzen. Die Einstellungen sind das klassische Beispiel: eine helle graue Seite, weiße Zeilen.
Diese eine Änderung gibt dir einen Boden und eine Decke. Die Seite ist der Boden, Karten und Sheets sind die Decke, und der Abstand dazwischen ist sichtbar, ohne dass eine einzige Linie gezogen wird.
Wo du es einsetzt:
- Der Seitenhintergrund, hinter jedem Screen mit Karten, Listen oder Abschnitten.
- Gruppierte Listen und Einstellungsscreens, wo die Zeilen weiß und die Lücken grau sind.
- Eingabefelder in einer weißen Karte, die im Seitengrau liegen können, damit sie vertieft wirken.
Wenn dein Screen ein langer weißer Artikel ganz ohne Karten ist, ist Weiß in Ordnung. Die Regel gilt für Interfaces, die aus Flächen bestehen.
Fix 2: Lass Schatten das Anheben übernehmen
Im Dark Mode ist Elevation eine hellere Farbe. Im Light Mode bleiben die Flächen weiß, und stattdessen wächst der Schatten. Eine ruhende Karte bekommt einen kleinen, weichen Schatten; ein Menü oder Dialog, der darüber schwebt, einen größeren, weicheren.
Zwei Gewohnheiten sorgen dafür, dass es gut aussieht:
- Tönde den Schatten mit deiner Tinte, nicht mit reinem Schwarz. Ein Schatten in der Farbe deines Textes (im Post war es #1B1530, ein tiefes Violett) wirkt wie Teil des Interfaces. Reines Schwarz wirkt wie ein Fleck.
- Größer heißt höher. Nutze eine kurze Skala aus vier Stufen, von klein bis groß, und ordne jeder Stufe eine Aufgabe zu: Karte, erhöhte Karte, Menü, Dialog. Erfinde dann niemals eine fünfte.
/* 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); }
Die graue Seite macht das möglich. Auf einer weißen Seite ist ein weicher Schatten fast unsichtbar, also gleichen Leute das mit einem dunkleren Schatten oder einem Rahmen aus. Auf #F2F2F7 reicht ein heller Schatten.
Fix 3: Weiche dein Schwarz auf, dann vertiefe deinen Akzent
Reiner #000000-Text auf einer weißen oder fast weißen Seite ist härter als nötig und lässt jede andere Farbe daneben schwach aussehen. Material 3 setzt seinen hellen Text einen Schritt weicher.
Text
Sekundärtext
Deaktiviert, 38 Prozent
- #1D1B20 für Text. Es ist die On-Surface-Farbe von Material 3. Ein Fast-Schwarz mit einem Hauch Violett, das auf Weiß wie auf Grau gut sitzt.
- #49454F für Sekundärtext wie Bildunterschriften, Hilfszeilen und Zeitstempel. Es ist weiterhin gut lesbar und deutlich leiser als der Haupttext.
- Dieselbe Tinte mit 38 Prozent für deaktivierte Labels und Icons. Über Weiß ergibt das #A9A8AA, und Material verwendet genau diese Deckkraft. Deaktivierter Text ist der eine Ort, an dem niedriger Kontrast der Sinn ist, und WCAG nimmt ihn aus.
Der Akzent braucht die umgekehrte Korrektur. Eine helle, leuchtende Markenfarbe, die auf einem dunklen Screen toll aussah, verschwindet auf Weiß.
Heller Akzent auf Weiß
Tiefer Akzent auf Weiß
#BB86FC ist Materials Baseline-Lila für dunkle Themes. Auf Weiß verschwindet es fast, ein Problem für alles, was als Button oder Link lesbar sein muss.
#6200EE ist Materials Baseline-Lila für helle Themes, dieselbe Familie, tief genug, um sich zu behaupten. Wenn du ein Light Theme baust, nutze nicht den Akzent des Dark Themes wieder. Wähle die tiefere Stufe desselben Farbtons.
Die 8 Light-Mode-Farben
Tipp auf einen Chip, um seinen Code zu kopieren.
| Rolle | Wert | Einsatz |
|---|---|---|
| Basis | #F2F2F7 | Die Seite, hinter Karten und gruppierten Listen |
| Karten | #FFFFFF | Karten, Sheets, Menüs, Zeilen |
| Trennlinien | #E5E5EA | Linien zwischen Zeilen. Nicht für Eingaberahmen |
| Text | #1D1B20 | Titel und Fließtext |
| Sekundär | #49454F | Bildunterschriften, Hilfstext, Zeitstempel |
| Deaktiviert | #A9A8AA | Deaktivierte Labels und Icons (Text mit 38 Prozent) |
| Primär | #6200EE | Buttons, Links, ausgewählte Zustände |
| Fehler | #B00020 | Fehlertext, Rahmen und Icons |
#E5E5EA ist iOS System Gray 5 und eignet sich für Trennlinien, weil eine Trennlinie nur bemerkt, nicht gelesen werden muss. Ein Feldrahmen braucht mehr. Unser Beitrag über Platzhalter und Labels nennt die Rahmenfarbe, die du stattdessen nutzen solltest.
Gib das deinem Entwickler
Dieselben acht Farben als CSS Custom Properties:
: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); }
Wenn du auch ein Dark Theme auslieferst, gib jedem dieser Namen einen zweiten Wert unter @media (prefers-color-scheme: dark), wie in der Token-Map für den Dark Mode. Die Namen bleiben gleich, nur die Werte ändern sich, und genau das verhindert, dass der Light Mode zum „invertierten Dark Mode“ wird.
Die Zahlen hinter „gut zu sehen“
Der Post sagt „gut zu sehen“ und „schwer zu sehen“. Für alle, die die Entscheidung im Review verteidigen müssen, hier die Zahlen (WCAG-2-Kontrastverhältnisse, auf Weiß berechnet):
| Paar | Kontrast | Urteil |
|---|---|---|
| #1D1B20 Text auf #FFFFFF | 17,1 zu 1 | Weit über dem Minimum von 4,5 zu 1 |
| #49454F Text auf #FFFFFF | 9,3 zu 1 | Komfortabel für Sekundärtext |
| #A9A8AA deaktiviert auf #FFFFFF | 2,4 zu 1 | Ausgenommen, deaktiviert soll leise sein |
| #BB86FC auf #FFFFFF | 2,65 zu 1 | Unter den 3 zu 1, die eine Button-Form braucht |
| #6200EE auf #FFFFFF | 7,63 zu 1 | Gut zu sehen |
Ein weiterer Fakt, den man kennen sollte: Auch die helle Fläche von Material 3 ist nicht #FFFFFF. Sie ist #FEF7FF, ein kaum getöntes Weiß. Selbst das Designsystem, das die meisten Teams als Standard behandeln, malt den Screen nicht in reinem Weiß.
FAQ
Was ist die beste Hintergrundfarbe für den Light Mode?
Ein weiches helles Grau wie #F2F2F7 für die Seite, mit #FFFFFF für die Karten darauf. Das Grau gibt weißen Flächen etwas, wovon sie sich abheben können, also brauchst du weniger Rahmen und Schatten.
Ist #FFFFFF eine schlechte Hintergrundfarbe?
Nicht immer, aber ein komplett weißer Screen kann keine Tiefe zeigen. Karten verschmelzen mit der Seite, und Rahmen und Schatten müssen die ganze Arbeit leisten. Weiß funktioniert am besten als Farbe der Flächen, nicht des ganzen Screens.
Was ist #F2F2F7?
Es ist iOS System Gray 6 im Light Mode, das Grau, das Apple hinter gruppierten Listen wie in der Einstellungen-App nutzt. Apple empfiehlt die Hintergrundfarben für Gruppen bei gruppierten Tabellenansichten.
Welche Textfarbe sollte ich auf weißem Hintergrund verwenden?
Ein weiches Fast-Schwarz wie #1D1B20 für Text und #49454F für Sekundärtext. Beides sind Material-3-Farben und beide lassen sich auf Weiß und auf #F2F2F7 gut lesen.
Wie zeigt man Elevation im Light Mode?
Mit Schatten. Im Dark Mode bedeutet eine hellere Fläche eine höhere, aber der Light Mode hat über Weiß keine hellere Stufe, also bleiben die Flächen weiß und der Schatten wächst mit der Höhe.
Sollte sich die Akzentfarbe zwischen Light und Dark Mode ändern?
Ja. Ein heller Akzent wie #BB86FC funktioniert auf dunklen Screens, verschwindet aber auf Weiß fast. Nutze auf hellen Flächen eine tiefere Stufe desselben Farbtons, etwa #6200EE.
Quellen
- Apple Human Interface Guidelines, Color: #F2F2F7 ist systemGray6 im Light Mode (R242 G242 B247), und die Hintergrundfarben für Gruppen sind für gruppierte Tabellenansichten gedacht.
- Material 3 Farbrollen, ausgelesen aus den androidx Compose ColorLightTokens und PaletteTokens: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), helle Surface #FEF7FF. Siehe die Material-Farbrollen.
- Deckkraft von 0,38 für deaktivierte Labels und Icons aus den Material-3-Komponenten-Tokens. #1D1B20 mit 38 Prozent über #FFFFFF ergibt #A9A8AA.
- #BB86FC und #6200EE sind Materials Baseline-Primärfarben für Dark und Light. #B00020 ist Materials Baseline-Fehlerfarbe für Light. #E5E5EA ist iOS System Gray 5 im Light Mode.
- WCAG 2.2, 1.4.3 Contrast (Minimum) und 1.4.11 Non-text Contrast. Verhältnisse mit der WCAG-Formel für relative Luminanz berechnet. Deaktivierter Text ist vom Minimum ausgenommen.
- Die Schattentinte #1B1530 und die vier Schattenstufen sind unsere eigene Empfehlung, kein Plattformwert.
- Zuerst veröffentlicht als Karussell auf 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
