Logo auf Farbverlauf-Hintergrund: so bleibt es klar

Um ein Logo auf einen Farbverlauf zu setzen, ohne dass es verschwindet, nimm eine einfarbige Version des Logos, setz sie in den ruhigsten Teil des Verlaufs, wo der Kontrast am stärksten ist, und lass Freiraum darum. Ein farbiges Logo teilt meist Farbtöne mit dem Verlauf und löst sich darin auf. Eine weiße oder dunkle Version, dort platziert, wo der Verlauf am dunkelsten oder hellsten ist, bleibt in jeder Größe scharf.

Der Rest dieses Ratgebers erklärt, warum Logos verschwinden, welche Versionen du vorbereiten solltest, wie du die richtige Stelle findest und prüfst, mit dem CSS dafür im Web.

Warum Logos auf Farbverläufen verschwinden

Ein einfarbiger Hintergrund hat eine Farbe, ein Logo kontrastiert also entweder damit oder nicht. Ein Farbverlauf hat viele. Ein weißes Logo, das über dem dunklen Ende eines Übergangs perfekt klar ist, kann über dem hellen Ende ins Nichts verblassen, und ein farbiges Logo kann der Mitte des Verlaufs so ähneln, dass seine Kanten verschwimmen.

Die Lehre: Beurteile ein Logo nie gegen den Verlauf als Ganzes. Beurteile es gegen die paar Pixel direkt dahinter.

Bereite die Logoversionen vor, die du brauchst

Die meisten Logoprobleme auf Farbverläufen sind gelöst, bevor jemand eine Designdatei öffnet, weil die richtigen Versionen bereitliegen. Halte sie zusammen in deinem Brand Kit, damit niemand improvisiert. Ist das Logo selbst ein Farbverlauf, lies zuerst Logos mit Farbverlauf: Ein Verlaufszeichen auf einem Verlaufshintergrund funktioniert selten.

Finde die Kontrastzone und prüf sie

WCAG, der Standard für Barrierefreiheit im Web, nimmt Logos von seinen Regeln für Textkontrast aus. Diese Ausnahme betrifft die Konformität, nicht die Sichtbarkeit. Das Minimum von 3:1 für bedeutungstragende Grafiken ist eine praktische Untergrenze: Darunter beginnt ein Logo, seine Kanten zu verlieren. Prüf es so.

1. 1

   Platziere das Logo grob

   Setz es dorthin, wo das Layout es will, meist in eine Ecke oder oben in die Mitte.

2. 2

   Nimm die Farben dahinter auf

   Nutze eine Pipette auf dem hellsten und dem dunkelsten Pixel direkt hinter dem Logo. Auf einem Farbverlauf können diese stark abweichen, sogar auf kleiner Fläche.

3. 3

   Teste beide gegen die Logofarbe

   Prüf jedes Paar mit einem Kontrastprüfer wie dem von WebAIM. Ziel ist mindestens 3:1 gegen den schlechteren der beiden Werte, und mehr bei kleinen Logos.

4. 4

   Verschieben statt flicken

   Fällt es durch, verschieb das Logo zum dunkleren oder helleren Ende des Verlaufs oder wechsle zur anderen einfarbigen Version, bevor du zu Kasten oder Schatten greifst.

5. 5

   Prüf es klein

   Verkleinere das Design auf Vorschaubildgröße. Wird das Logo zum Fleck, nutze dort die Version nur mit Bildmarke.

Unser Ratgeber zu Farbkontrast erklärt die Verhältnisse ausführlicher, und Text auf Farbverlauf behandelt dasselbe Problem für Überschriften.

Wohin ein Logo auf einem Farbverlauf gehört

Such den Bereich, in dem sich der Verlauf am wenigsten ändert. Ein Logo, das über einem scharfen Farbwechsel liegt, sieht aus, als stünde es auf zwei Hintergründen zugleich. Ecken sind oft ruhig, weil viele Verläufe ihren dramatischsten Übergang in der Mitte haben. Gib dem Logo auf jeder Seite Freiraum, mindestens die Höhe eines seiner Buchstaben, damit der Verlauf es rahmt, statt es zu bedrängen.

In Gradiently weiß ein Mark, wo deine Wörter und dein Logo sind: Sein ruhigster Bereich mit dem besten Kontrast wandert dahinter, und unruhige Details beruhigen sich in der Nähe, du musst die richtige Stelle also selten von Hand suchen. Logos aus deinem Brand Kit lassen sich direkt in jedes Design ziehen.

Ausgespart, einfarbig oder auf einer Plakette

Es gibt drei Wege, ein Logo auf Farbe zu setzen, und jeder passt zu einem anderen Farbverlauf.

Ein Logo auf einen CSS-Verlauf setzen

Zeichne das Logo im Web als Inline-SVG, das currentColor nutzt, damit eine CSS-Farbe zwischen weißer und dunkler Version umschaltet. Setz es dann in die Ecke, wo der Verlauf am dunkelsten ist. Bei einem Verlauf mit 135 Grad liegt die erste Farbe oben links.

.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}