Branding im Onlineshop: Farben, Schrift, Bildsprache

Ein Shop wirkt an jeder Stelle anders, sobald Farbe, Schrift und Bilder aus verschiedenen Quellen kommen: Der Warenkorb folgt der Vorlage des Shopsystems, das Kampagnenbanner einer Agentur, die Produktfotos dem Lieferanten. Wer das Erscheinungsbild vereinheitlichen will, entscheidet drei Dinge schriftlich: Farbrollen mit geprüftem Kontrast, eine Typografie-Skala mit geklärter Lizenz und Regeln für Bilder.

Worauf es ankommt

Wiedererkennbar wird ein Shop durch die Wiederholung derselben Rollen an denselben Stellen, nicht durch die Zahl der Farben. Eine Rolle ist eine Aufgabe: Seitenhintergrund, Fließtext, Handlung, Hinweis, Fehler, Fokus. Jede Rolle bekommt genau einen Wert, und das Theme bezieht alle Werte aus einer Datei.

Eine Vorlage ohne Werte ist kein Styleguide, sondern ein Moodboard. In die Vorlage gehören Hex-Werte, Schriftgrößen mit Einheit, Zeilenhöhen, Seitenverhältnisse für Bilder und der nachgerechnete Kontrast je Farbpaar. Erst damit kann eine Agentur oder eine neue Mitarbeiterin eine Seite bauen, die zur Vorlage passt.

Die Farbrollen und ihr Kontrast

Die Kontrastanforderung schränkt die Palette ein, deshalb steht sie vor der Farbwahl. Erfolgskriterium 1.4.3 der Web Content Accessibility Guidelines (WCAG) 2.1 verlangt für Text und Bilder von Text mindestens 4,5:1; großer Text mit mindestens 18 Punkt oder 14 Punkt fett mindestens 3:1. Nach der Norm haben keinen Kontrastanspruch: Text, der Teil eines Logos oder Markennamens ist, reine Dekoration, für niemanden sichtbarer Text, Text in einem Bild mit bedeutungstragendem anderem Inhalt und Text in einem inaktiven Bedienelement, etwa in einer nicht bedienbaren, ausgegrauten Schaltfläche. Für Fließtext, Preise und die Beschriftung eines bedienbaren Elements gilt die Anforderung.

Für die visuelle Information, die nötig ist, um ein Bedienelement und dessen Zustand zu erkennen, und für Teile von Grafik, die zum Verständnis des Inhalts nötig sind, gilt 3:1 gegen die angrenzende Farbe (Erfolgskriterium 1.4.11). Ausgenommen sind nach der Norm inaktive Komponenten, Komponenten, deren Aussehen der Nutzeragent bestimmt und die der Autor nicht verändert, und Grafik, deren bestimmte Darstellung für die Aussage wesentlich ist.

Ein einzelner Farbwert hat keinen Kontrast; nur das Paar aus Vordergrund und Hintergrund hat einen. Der Wert folgt der Formel in WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relative Luminanz der helleren und der dunkleren Farbe im sRGB-Farbraum sind.

WCAG ist eine Empfehlung des World Wide Web Consortium und kein Gesetz. Sie ist der technische Maßstab, mit dem Sie ein Farbpaar beurteilen. Das Barrierefreiheitsstärkungsgesetz verweist auf eine Verordnung, die Verordnung auf den Stand der Technik, und die Bundesfachstelle für Barrierefreiheit nennt als zentrale technische Referenz die Europäische Norm EN 301 549 V3.2.1 (2021-03), deren Abschnitt 9.1.4.3 für Webseiten genau dieses Erfolgskriterium verlangt. § 3 Abs. 1 BFSGV lässt jedoch ausdrücklich zu, vom Stand der Technik abzuweichen, wenn auf andere Weise die Anforderungen der Verordnung in gleichem Maße erfüllt werden; die WCAG-Kriterien sind damit nicht der einzige zulässige Weg. WCAG 2.2 (12. Dezember 2024) führt beide Erfolgskriterien unverändert.

Beispielvorlage mit geprüften Farbpaaren

Die Tabelle ist eine Beispielvorlage mit Werten der Redaktion. Die Kontrastwerte sind mit der Formel aus WCAG 2.1 nachgerechnet und auf zwei Nachkommastellen gerundet; die Spalte Anforderung nennt die Grenze des jeweiligen Einsatzes.

Rolle	Vordergrund	Hintergrund	Kontrast	Anforderung	Beispiel
Fließtext	#1F2933	#FFFFFF	14,76:1	4,5:1	Produktbeschreibung
Sekundärtext	#4A5560	#FFFFFF	7,61:1	4,5:1	Lieferzeit, Hinweiszeile
Text auf Markenfläche	#FFFFFF	#1B5E8C	6,94:1	4,5:1	Schaltfläche “In den Warenkorb”
Link im Fließtext	#0B5FA5	#FFFFFF	6,57:1	4,5:1	Link in der Produktbeschreibung
Fokusrahmen am Feld	#0B5FA5	#FFFFFF	6,57:1	3:1	Tastaturfokus im Eingabefeld
Fokusrahmen auf Markenfläche	#FFD166	#1B5E8C	4,81:1	3:1	Fokus auf der Schaltfläche
Fehlermeldung	#A61B1B	#FFFFFF	7,52:1	4,5:1	fehlendes Pflichtfeld
Bestätigung	#14622F	#FFFFFF	7,45:1	4,5:1	Bestellung angenommen
Feldrahmen	#6B7785	#FFFFFF	4,56:1	3:1	Begrenzung des Eingabefelds
Text auf heller Fläche	#1F2933	#F2F5F7	13,48:1	4,5:1	Rabattmarke auf der Produktkarte

Zwei Paare zeigen, wie eine Palette durchfällt: Ein heller Grauton #A9A9A9 auf Weiß ergibt 2,35:1, weiße Schrift auf dem Orange #F5A623 ergibt 2,03:1. Beide verfehlen 4,5:1. Wer das Orange behalten will, setzt dunkle Schrift darauf (#1F2933 auf #F5A623: 7,28:1) oder dunkelt die Fläche ab (#FFFFFF auf #A85B00: 5,05:1).

Ein Wert gilt nur für das fertige Element. Liegt Text über einem Foto, einem Verlauf oder einem halbtransparenten Schleier, ist der Hintergrund nicht mehr eine einzelne Farbe; dann legen Sie eine deckende Fläche hinter den Text.

Schrift: erst Lizenz, dann Skala

Für eine Schriftdatei gilt der Lizenztext ihres Anbieters. Die SIL Open Font License 1.1 erlaubt ausdrücklich, die Datei zu nutzen, einzubetten, zu ändern und weiterzugeben. Die Schrift darf nicht allein verkauft werden, und eine geänderte Fassung muss unter derselben Lizenz bleiben. Einen als reserviert gekennzeichneten Namen darf eine geänderte Fassung nur führen, wenn der Rechteinhaber dazu ausdrücklich schriftlich zugestimmt hat. Bei jeder anderen Lizenz steht der Umfang im Lizenztext: Er muss die Einbettung als Webfont und die erlaubten Domains decken.

Den rechtlichen Rahmen setzt in Deutschland das Urheberrechtsgesetz. Die §§ 69a bis 69d UrhG gelten für Computerprogramme und damit für eine Schriftdatei nur, wenn diese als Computerprogramm geschützt ist, also nach § 69a Abs. 3 das Ergebnis der eigenen geistigen Schöpfung ihres Urhebers darstellt. Ist das der Fall, sind Vervielfältigung und öffentliche Zugänglichmachung dem Rechtsinhaber vorbehalten (§ 69c Nr. 1 und 4 UrhG). Ohne besondere vertragliche Bestimmung bedürfen die in § 69c Nr. 1 und 2 genannten Handlungen nicht der Zustimmung, wenn sie für eine bestimmungsgemäße Benutzung des Programms einschließlich der Fehlerberichtigung durch den zur Verwendung Berechtigten notwendig sind (§ 69d Abs. 1 UrhG); das umfasst die Vervielfältigung und die Bearbeitung, aber nicht die öffentliche Zugänglichmachung. Ohne ausdrückliche Erlaubnis für die Web-Einbettung fehlt dafür die Grundlage.

Die Skala legt für jede Textart eine Stufe fest; die letzte Spalte nennt die Kontrastgrenze, die für diese Größe gilt.

Element	Größe	Zeilenhöhe	Gewicht	Kontrast
Fließtext	1 rem (16 px)	1,6	400	4,5:1
Sekundärtext	0,875 rem (14 px)	1,5	400	4,5:1
Überschrift H2	1,5 rem (24 px)	1,3	600	3:1, wenn große Schrift
Schaltfläche	1 rem (16 px)	1,2	600	4,5:1
Fehlerhinweis	0,875 rem (14 px)	1,5	600	4,5:1

18 Punkt entsprechen bei 96 dpi 24 Pixel, und nach der Definition in WCAG 2.1 gilt 18 Punkt ungefähr als 1,5 em. Ob eine Überschrift in 1,5 rem als großer Text zählt, hängt deshalb von der Schrift ab; für Schaltflächen und Hinweise in 16 oder 14 Pixeln gilt die Grenze von 4,5:1.

Bildsprache in Regeln fassen

Regeln für Bilder gehören in dieselbe Vorlage: Seitenverhältnis (1:1 im Produktraster, 4:5 in der Kampagne), Hintergrund, Freisteller oder Szene, Abstand zum Rand, Mindestbreite und ein Dateinamenschema. Diese Werte entscheiden, ob Bilder aus zwei Quellen im Raster zusammenpassen. Wie Sie Produktbilder technisch aufbauen, beschreibt Produktfotos für den Onlineshop.

Klären Sie für jedes Bild die Nutzungsrechte: erlaubte Medien, Gebiet, Dauer und Bearbeitung. In Deutschland gilt als Grundregel, dass Bildnisse einer erkennbaren Person nur mit deren Einwilligung verbreitet oder öffentlich zur Schau gestellt werden dürfen (§ 22 Satz 1 KunstUrhG). § 23 Abs. 1 KunstUrhG nennt Ausnahmen, etwa Bilder, auf denen die Personen nur als Beiwerk neben einer Landschaft oder sonstigen Örtlichkeit erscheinen (Nr. 2); die Ausnahme greift nicht, wenn die Verbreitung ein berechtigtes Interesse des Abgebildeten verletzt (§ 23 Abs. 2 KunstUrhG). Prüfen Sie das vor dem Upload.

Was das Recht verlangt

Deutschland: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt für Dienstleistungen, die nach dem 28. Juni 2025 für Verbraucher erbracht werden, darunter Dienstleistungen im elektronischen Geschäftsverkehr (§ 1 Abs. 3 Nr. 5 BFSG). Ein Verkauf ausschließlich an Geschäftskunden fällt nicht darunter. Der Dienstleistungserbringer muss die erfassten Dienste barrierefrei anbieten (§ 3 Abs. 1 BFSG). Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme (§ 2 Nr. 17 BFSG) sind ausgenommen (§ 3 Abs. 3 Satz 1 BFSG). Die Verordnung zum BFSG verlangt Informationen in einer Schriftart mit angemessener Größe, geeigneter Form, ausreichendem Kontrast und ausreichenden Abständen (§ 12 Nr. 2 Buchst. f BFSGV) und gestaltet Webseiten wahrnehmbar, bedienbar, verständlich und robust (§ 12 Nr. 3 BFSGV); eine Zahl für den Kontrast nennt sie nicht. Die Einzelheiten stehen in der BFSG-Checkliste für Onlineshops.

Österreich: Das Barrierefreiheitsgesetz (BaFG) gilt für Dienstleistungen, die nach dem 28. Juni 2025 für Verbraucher erbracht werden (§ 2 Abs. 2 BaFG), darunter Dienstleistungen im elektronischen Geschäftsverkehr (§ 2 Abs. 2 Z 6 BaFG); Verkäufe nur an Unternehmer fallen nicht darunter. Wirtschaftsakteure dürfen nur Dienstleistungen anbieten, welche die Anforderungen der Anlage 1 erfüllen (§ 4 Abs. 1 und 3 BaFG). Deren 3. Abschnitt verlangt in Buchst. c Websites, die wahrnehmbar, bedienbar, verständlich und robust sind, und in Buchst. b sublit. ee eine Schriftart mit ausreichendem Kontrast. Kleinstunternehmen sind ausgenommen, wenn sie die Schwellen nach § 3 Z 19 BaFG einhalten: weniger als zehn Beschäftigte und höchstens 2 Millionen Euro Umsatz oder Bilanzsumme (§ 6 Abs. 1 BaFG). Mehr dazu in Barrierefreiheit im Onlineshop in Österreich.

Schweiz: Das Behindertengleichstellungsgesetz (BehiG, SR 151.3, Stand am 1. Juli 2020) erfasst nach Art. 3 lit. e unter anderem grundsätzlich von jedermann beanspruchbare Dienstleistungen Privater; nach Art. 6 BehiG dürfen Private, die Dienstleistungen öffentlich anbieten, Menschen mit Behinderungen nicht wegen ihrer Behinderung diskriminieren. Wer im Sinne von Art. 6 diskriminiert wird, kann nach Art. 8 Abs. 3 BehiG bei einem Gericht eine Entschädigung beantragen. Ein Onlineshop mit offenem Angebot fällt damit in diesen Rahmen. Eine technische Barrierefreiheitspflicht mit Norm- oder Kontrastvorgaben, wie sie das BFSG und das BaFG für Dienstleistungen im elektronischen Geschäftsverkehr aufstellen, haben wir in den geöffneten Schweizer Quellen nicht gefunden. Ob die EU-Regeln einen Schweizer Shop treffen, der an Verbraucher in Deutschland oder Österreich verkauft, hängt davon ab, ob er dort als Dienstleistungserbringer auf dem Unionsmarkt auftritt (Definition in § 2 Nr. 4 BFSG). Der Entscheidungsweg steht in Barrierefreiheit im Onlineshop in der Schweiz.

Typische Fehler

1. Farbe als einziges Signal: Ein Rabatt, der nur in Rot erscheint und keinen Text und kein Symbol trägt, genügt Erfolgskriterium 1.4.1 (Stufe A) nicht. Dieselbe Angabe muss auch für alle erkennbar sein, die Rot und Grün nicht unterscheiden.
2. Nur Text geprüft: Erfolgskriterium 1.4.11 erfasst die visuelle Information, die nötig ist, um ein Bedienelement und dessen Zustand zu erkennen, etwa den Feld- und den Fokusrahmen, und Teile von Grafik, die zum Verständnis des Inhalts nötig sind; dafür gilt 3:1 gegen die angrenzende Farbe. Ein sehr heller Feldrahmen auf Weiß fällt durch, obwohl der Text daneben stimmt. Die Ausnahme für Komponenten, deren Aussehen der Nutzeragent bestimmt, greift nur, wenn der Autor das Aussehen nicht verändert; inaktive Elemente bleiben ausgenommen.
3. Graue Hinweise: Platzhalter- und Hinweistexte in #A9A9A9 erreichen auf Weiß nur 2,35:1. Nehmen Sie den Wert, den Sie auch für Sekundärtext verwenden.
4. Skala ohne Einheit: Schriftgrößen, die nur im Design-Werkzeug stehen, kommen im Theme nicht an. Notieren Sie Größe, Zeilenhöhe und Gewicht als übertragbare Werte.
5. Einbettung ohne Lizenz: Eine Druck- oder Desktoplizenz nennt die Website nicht. Prüfen Sie die Lizenz, bevor die Schrift im Theme steht.
6. Fehlende Bildwerte: Bilder aus zwei Quellen mit unterschiedlichem Seitenverhältnis ergeben im Raster eine sichtbare Kante.

So gehen Sie vor

1. Legen Sie die Rollen fest und ordnen Sie jeder Rolle einen Farbwert zu. Schreiben Sie die Liste in eine Datei, aus der das Theme die Werte bezieht.
2. Rechnen Sie jedes Paar aus Vordergrund und Hintergrund nach und notieren Sie den Wert mit Datum in der Vorlage.
3. Prüfen Sie die Schriften: Lizenzumfang für die Web-Einbettung, Fallback-Stapel und die Skala in rem mit Zeilenhöhe.
4. Fassen Sie die Bildregeln mit Seitenverhältnis, Beschnitt und Mindestbreite zusammen.
5. Wiederholen Sie die Kontrastprüfung nach jeder Änderung an Farben oder Schriftgrößen, denn ein anderer Hintergrund verändert jeden Wert. Was eine Vorlage leisten muss, prüfen Sie mit Shopsystem und Barrierefreiheit.