Farben, Typografie und Bildsprache richtig kombinieren

Ein System statt einer Sammlung

Eine stimmige Gestaltung entsteht, wenn Farben, Schriften und Bilder gemeinsam eine Aufgabe erfüllen. Wählen Sie die Elemente deshalb nicht unabhängig voneinander aus. Legen Sie zunächst fest, welche Inhalte dominieren und welche Stimmung zur Arbeitsweise Ihres Angebots passt. Eine sachliche Beratung kann visuell ruhig auftreten. Ein experimentelles Gestaltungsangebot darf stärkere Kontraste nutzen, sollte aber ebenso verständlich bleiben.

Beginnen Sie mit einer einzigen Musterseite. Sie sollte eine lange Überschrift, zwei Absätze, eine Bildunterschrift, einen Link und eine Handlungsaufforderung enthalten. So beurteilen Sie die Gestaltung in einem realistischen Zusammenhang. Eine Palette aus fünf schönen Farbfeldern sagt noch wenig darüber aus, ob Ihr späterer Text lesbar ist oder wichtige Informationen schnell gefunden werden.

Farben nach Funktion ordnen

Definieren Sie zuerst eine Hintergrundfarbe und eine Textfarbe. Ergänzen Sie anschließend eine Akzentfarbe sowie gegebenenfalls eine zurückhaltende Fläche für Hinweise. Benennen Sie diese Rollen in Ihrem Markenprofil. Wenn jede neue Seite eine andere Farbe für dieselbe Handlung verwendet, müssen Besucherinnen und Besucher sich immer wieder neu orientieren. Wiederkehrende Funktionen sollten deshalb wiederkehrend gestaltet sein.

Prüfen Sie den Kontrast jeder tatsächlich verwendeten Kombination. WCAG nennt für normalen Text grundsätzlich mindestens 4,5:1 und für großen Text mindestens 3:1, mit definierten Ausnahmen. Eine helle Salbeifarbe kann für Flächen geeignet sein, während sie als kleiner Text auf Weiß zu wenig Kontrast bietet. Kennzeichnen Sie Fehler oder Auswahlzustände außerdem mit Text oder Symbolen, damit Farbe nicht allein die Information trägt.

Typografie muss im Alltag funktionieren

Eine gut ausgebaute Schriftfamilie genügt oft für ein kleines Projekt. Wenn Sie zwei Familien kombinieren, geben Sie ihnen klare Aufgaben: beispielsweise eine sachliche Schrift für Navigation und Fließtext sowie eine charaktervolle Schrift für redaktionelle Akzente. Zu viele wechselnde Schnitte erschweren die Hierarchie. Arbeiten Sie zunächst mit wenigen Größen und Gewichtungen.

Testen Sie deutsche Sonderzeichen, Zahlen, Währungsangaben und lange zusammengesetzte Wörter. Kontrollieren Sie die Darstellung auf einem Smartphone und bei vergrößertem Text. Eine großzügige Zeilenhöhe und überschaubare Zeilenlänge erleichtern längere Lektüre. Prüfen Sie vor dem Einsatz die Schriftlizenz, insbesondere Webnutzung, Einbettung und Weitergabe. Eine lokal installierte Schrift ist nicht automatisch für jede Veröffentlichung freigegeben.

Bildsprache über Kriterien beschreiben

Statt nur 'moderne Bilder' festzulegen, definieren Sie beobachtbare Eigenschaften: natürliches Seitenlicht, ruhige Hintergründe, sichtbare Arbeitsmaterialien, zurückhaltende Farben und dokumentarische Perspektiven. Beschreiben Sie ebenso, welche Motive nicht passen. Eine solche Liste hilft bei eigener Fotografie, bei Briefings und bei der Auswahl lizenzierter Bilder.

Planen Sie unterschiedliche Bildaufgaben. Ein breites Einstiegsbild braucht Raum für die Komposition, ein Hochformat unterstützt Porträts, ein Detailbild erklärt Material oder Prozess. Verwenden Sie Bilder als Inhalt, nicht als bloße Füllfläche. Kennzeichnen Sie inszenierte Beispiele und stellen Sie abgebildete Menschen nicht ohne Grundlage als Ihr Team dar. Auch eine Bildlizenz beantwortet nicht automatisch alle Fragen zu Persönlichkeits- oder Markenrechten.

Die Kombination prüfen

Stellen Sie drei Entwürfe nebeneinander: eine Artikelübersicht, eine Angebotsseite und ein kleines Vorschaubild. Bleiben Überschriften, Links und Bildunterschriften erkennbar? Wirken die Bilder trotz verschiedener Motive zusammengehörig? Funktioniert die Seite auch ohne Bild? Diese Fragen zeigen, ob Ihr System über eine einzige schöne Komposition hinaus trägt.

Dokumentieren Sie Farbwerte, Schriftrollen, Abstände und Bildkriterien in einem kurzen Leitfaden. Bewahren Sie zusätzlich die Originaldateien und Lizenznachweise auf. Ändern Sie jeweils nur einen wichtigen Parameter und vergleichen Sie die Ergebnisse. So lernen Sie, welche Entscheidung tatsächlich Wirkung hat. Das Ziel ist ein verlässliches Gestaltungswerkzeug, mit dem Sie neue Inhalte selbstständig und konsistent veröffentlichen können.

Quellen & weiterführende Informationen

• W3C: Understanding SC 1.4.3 – Contrast Minimum ↗
• Urheberrechtsgesetz § 31: Einräumung von Nutzungsrechten ↗

Rechtliche und wirtschaftliche Hinweise dienen der Orientierung. Die Einordnung Ihrer Tätigkeit und konkrete Pflichten sind individuell zu prüfen.