Farben, die den YouTube-Feed überleben

Zwei verschiedene Probleme in einer Frage

„Welche Farben funktionieren auf einem Thumbnail" sind eigentlich zwei Fragen mit verschiedenen Antworten, und sie zu vermischen ist der Grund, warum die Ratschläge, die man findet, so unbestimmt sind.

Die erste ist die Trennung von der Oberfläche: dein Bild hat eine Kante, und diese Kante liegt direkt an YouTubes Hintergrund. Diese lässt sich berechnen, und darum geht es hier überwiegend.

Die zweite ist die Trennung von den Nachbarn: innerhalb des Bildes konkurrierst du nicht mit der Oberfläche, sondern mit den anderen Thumbnails der Reihe. Dafür gibt es keine allgemeine Antwort, weil sie vollständig davon abhängt, wie diese Thumbnails aussehen.

Die Oberfläche ist genau eine von zwei Farben

YouTubes Seite ist im dunklen Modus fast schwarz und im hellen weiß. Der dunkle Wert ist #0F0F0F, nah genug am Schwarz, dass ihn für Schwarz zu halten der Fehler ist: es ist ein dunkles Grau, und ein wirklich schwarzes Thumbnail ist dunkler als die Seite, auf der es liegt.

Welchen der beiden ein Zuschauer benutzt, erfährst du nicht. Dieselbe Datei muss auf beiden halten, und das heißt: der brauchbare Kontrast einer Farbe ist nicht ihr bester Fall, sondern ihr schlechtester.

Genau diese zwei Werte bildet die Nachbildung in dem Vorschau-Tool ab, und deshalb hat es einen Hell-/Dunkel-Schalter: dieselbe Datei gegen die zwei Gründe, auf denen sie wirklich landet.

Wie die Zahlen tatsächlich aussehen

Kontrastverhältnisse, auf die übliche Weise berechnet, für Farben, die man plausibel an die Kante eines Thumbnails setzen würde. Die letzte Spalte ist die entscheidende, denn sie ist der Fall, den du nicht ausschließen kannst: Es sind Kontrastverhältnisse in dem Sinn, in dem die WCAG sie definieren — die Zahlen bedeuten hier also dasselbe wie überall sonst im Web.

Sie messen die Trennung zwischen zwei Flächenfarben, nicht die Lesbarkeit von Text — dafür gibt es eigene Zahlen, in dem Leitfaden zur Textgröße. Lies die Tabelle als: wie deutlich ist die Grenze, an der mein Thumbnail endet und die Seite beginnt.

Das Ergebnis ist das Gegenteil des üblichen Rats

Geh die letzte Spalte durch, und das Muster ist nicht das, was „nimm knallige Farben" vorhersagt. Die hellsten Optionen schneiden am schlechtesten ab, denn knallig heißt fast immer hohe Helligkeit, und hohe Helligkeit ist gegen Weiß unsichtbar.

Eine weiße Kante erreicht im hellen Modus 1,0:1 — buchstäblich keine Grenze. Gelb, Cyan und Hellgrau liegen mit 1,3 bis 1,5 kaum besser. Jede davon sieht in einem Screenshot im dunklen Modus prächtig aus, und genau so werden sie ausgewählt.

Die Farben, die beide Gründe überleben, sind die gesättigten mittlerer Helligkeit: Rot, Blau, Magenta, Orange und selbst ein schlichtes Mittelgrau. Keine gewinnt eine der Spalten deutlich, und das ist der Punkt: sie sind die einzigen, die nie schwer verlieren.

Wo diese Regel gilt und wo nicht

Es ist eine Regel über das äußere Band des Bildes, nicht über den ganzen Entwurf. Die Mitte eines Thumbnails berührt die Oberfläche nie, eine weiße Mitte ist also kein Problem; eine weiße Kante schon.

Das ist eine kleinere Einschränkung, als es klingt, und eine sehr genaue: die letzten Prozent des Bildes entscheiden, ob dein Thumbnail als Gegenstand auf der Seite gelesen wird oder in ihr verläuft. Eine verlaufende Kante sieht nicht bloß unsauber aus — sie macht das Thumbnail kleiner, denn der im Hintergrund aufgelöste Teil zählt nicht mehr als dein.

Innerhalb des Bildes ändert sich der Wettbewerb

Sobald die Kante hält, ist Farbe kein messbares Problem mehr, sondern ein vergleichendes. Für das Innere eines Thumbnails gibt es keine beste Farbe, denn das Einzige, was zählt, ist, was daneben liegt.

Ein gesättigt rotes Thumbnail fällt in einer Reihe matter Grautöne auf und verschwindet in einer Reihe gesättigter Rottöne — und die Reihe wählst nicht du. In den meisten Nischen konvergiert die Konvention, was heißt: die Farbe, die am professionellsten wirkt, ist auch die, die alle anderen benutzen.

Deshalb lautet die nützliche Frage nie „welche Farbe ist die beste", sondern „welche Farbe fehlt hier". Den Entwurf im Feed anzusehen, in dem er erscheinen wird, beantwortet das in Sekunden; keine Menge Theorie tut das.

Der Farbton versagt vor der Helligkeit

Ein weiterer Grund, in Hell und Dunkel statt in Farbnamen zu denken: in der Größe, in der ein Thumbnail wirklich gesehen wird, bricht der Farbtonkontrast zuerst zusammen.

Rot auf Blau ist in voller Größe kräftig und in Kachelgröße Matsch, weil wenige Pixel von beiden verrechnet werden und übrig bleibt ihre ähnliche Helligkeit. Hell gegen Dunkel übersteht dieselbe Behandlung, denn Hell und Dunkel zu verrechnen lässt immer noch einen Unterschied.

Die Probe ist, den Entwurf in Graustufen anzusehen. Fällt er ohne Farbe auseinander, hat ihn die Farbe getragen — und die Anzeigegröße nimmt die Farbe zuerst mit.

Der weiße Rand, und wann er eine Krücke ist

Ein dünner weißer oder knalliger Rand um das ganze Thumbnail ist die Standardlösung für die verlaufende Kante, und sie funktioniert — im dunklen Modus. Im hellen ist sie der unsichtbare Fall aus der Tabelle: ein für ein Thema gewählter Rand kann im anderen gar kein Rand sein.

Die Fassung, die beides überlebt, ist ein Rand mittlerer Helligkeit, ein zweifarbiger Rand, oder einfach eine Komposition, deren äußeres Band Mitteltöne statt eines Extrems trägt. Letztere sieht nie nach Behelf aus.

Es lohnt außerdem die Frage, ob der Rand ein Problem löst oder verdeckt. Ein Entwurf ohne klares Motiv wird durch einen Rahmen nicht klarer; er wird ein gerahmter unklarer Entwurf.

Eine Prüfung in drei Minuten

Nichts davon braucht eine Farbtheorie. Es braucht drei Blicke auf dieselbe Datei, in der Reihenfolge, die Probleme am schnellsten findet.

1. Die Kante auf beiden Gründen ansehenLeg das Thumbnail auf Weiß und auf #0F0F0F. Verschwindet die Grenze auf einem von beiden, ist das die Farbe, die geändert werden muss — und die Änderung betrifft nur das äußere Band.
2. In Graustufen ansehenFunktioniert der Entwurf dann nicht mehr, hat ihn der Farbton getragen, und genau den nimmt die Anzeigegröße zuerst weg.
3. Neben den Nachbarn ansehenIm Feed, in dem er erscheinen wird, in der Größe, in der er erscheinen wird. Nur dieser Schritt sagt dir, ob die Farbe, die die Oberfläche übersteht, auch aus der Reihe heraussticht.

Was davon bleibt

Die Kurzfassung: gesättigte Farben mittlerer Helligkeit an den Kanten, weil nur sie gegen beide Oberflächen halten. Extreme von Hell und Dunkel im Inneren des Bildes, wo sie nichts kosten. Helligkeitskontrast statt Farbtonkontrast, weil der Farbton die Größe nicht übersteht. Und die eigentliche Wahl getroffen gegen die Reihe, in der du erscheinen wirst, nicht gegen eine Theorie.

Dieser letzte Teil ist der einzige Schritt, den kein Artikel für dich erledigen kann, dieser eingeschlossen, weil er von einer Menge Thumbnails abhängt, die sich jede Woche ändert.

Häufige Fragen dazu