Note: The translation is currently in progress. – We appreciate your patience.
Im Zuge des aktuellen ThemeWare® Updates haben wir zahlreiche Farbkonfigurationen in unseren ThemeWare®-Varianten angepasst, um die visuelle Wahrnehmbarkeit und insbesondere die Kontrastverhältnisse zu optimieren. Ziel ist eine verbesserte Barrierefreiheit und ein konsistenteres Nutzererlebnis. Da individuelle Farbkonfigurationen im Shop zu abweichenden Darstellungen führen können, empfehlen wir allen Shopbetreibern, ihre bestehenden Einstellungen zu überprüfen und bei Bedarf anzupassen, um mögliche Kontrastprobleme frühzeitig zu vermeiden.
Alle betroffenen Konfigurationen sind unten vollständig dokumentiert, sortiert nach Theme und Bereich.
Eigene Farbanpassungen oder individuelle Branding-Farben können in Kombination mit den neuen Kontrastwerten zu Darstellungsproblemen führen. Gerade im Checkout oder bei Call-to-Action-Elementen (z. B. Kaufen-Buttons) kann das direkte Auswirkungen auf die Conversion haben.
Prüfe deine aktuelle Shop-Konfiguration sorgfältig, insbesondere wenn du eigene Farben hinterlegt hast. Gerade bei individuellen Farbwerten kann es durch das Update zu ungewollten Kontrastproblemen kommen. Unser Barrierefreiheit Quick Start Toolkit unterstützt dich dabei, das Thema Barrierefreiheit gezielt und effizient anzugehen.
Im Folgenden findest du eine vollständige Übersicht aller Änderungen an den Farbkonfigurationen – sortiert nach Theme und jeweiligen Bereichen. So kannst du gezielt nachvollziehen, ob und wo deine Shop-Konfiguration betroffen ist.
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #238077
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button-text: #fff
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften" => Textfarbe: $twt-color-brand-secondary-dark
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Dunkel): #238077
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe: #4a7500
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #4a7500
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "Status-Ausgaben" => Fehler: #be3c37
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe: #608000
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Dunkel): #496100
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #608000
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe: #cb4820
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Dunkel): #ba3108
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe: #ff0000
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Hell): #e84545
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe: #0f7b6e
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration" => Primär-Button: $sw-color-brand-primary
Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration" => Textfarbe: #555555
Tab "Header" => Bereich "Top-Bar" => Abschnitt "Farbkonfiguration" => Textfarbe @hover: $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Textfarbe @active: $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)" => Farbe (Home-Link) @active: $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Hintergrundfarbe @hover: $twt-color-brand-secondary-dark
Tab "Footer" => Bereich "Oberer Bereich" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: $twt-color-brand-secondary-dark
Tab "Footer" => Bereich "Mittlerer Bereich" => Abschnitt "Farbkonfiguration" => Linkfarbe @hover: $twt-color-brand-secondary-dark
Tab "Footer" => Bereich "Mittlerer Bereich" => Abschnitt "Farbkonfiguration" => Textfarbe (Überschrift): $twt-color-brand-secondary-dark
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration" => Iconfarbe (Footer): $twt-color-brand-secondary-dark
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration" => Iconfarbe (Header): $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Rahmenfarbe: $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Rahmenfarbe @hover: $sw-color-brand-secondary
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Hintergrundfarbe: $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Hintergrundfarbe @hover: $sw-color-brand-secondary
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Hintergrundfarbe (Badge): $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Merkzettel-Button" => Hintergrundfarbe (Badge): $twt-color-brand-secondary-dark
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt ""Mein Konto"-Button" => Hintergrundfarbe (Badge): $twt-color-brand-secondary-dark
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Dunkel): #3d6100
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Produktseiten" => Bereich "Teilen-Links (in der Buybox)" => Abschnitt "Farbkonfiguration" => Icon-Färbung: #4a7500
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #f6f6f6
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #6b6b6b
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): #f6f6f6
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #6b6b6b
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #6b6b6b
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung: individuelle Farbe
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button" => Textfarbe: $twt-color-brand-secondary-dark
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #d6d6d6
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #d6d6d6
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung: individuelle Farbe
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe
Tab "Footer" => Bereich "Unterer Bereich" => Abschnitt "Farbkonfiguration" => Rahmenfarbe (Headline): #fcfcfc
Tab "Footer" => Bereich "Unterer Bereich" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #fcfcfc
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #e9e9e9
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): #e9e9e9
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #474747
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #474747
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #474747
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration" => Textfarbe (Zusatzinformationen): #6b6b6b
Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration" => Primär-Button: $twt-color-brand-primary-dark
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Textfarbe @active: #262626
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Hintergrundfarbe (Badge): #111111
Tab "Layout" => Bereich "E-Commerce" => Kaufen-Button: #3d7f53
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Dunkel): #086358
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Hell): #0eaa98
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Dunkel): #8b2340
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Hell): #de688a
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: $sw-color-brand-primary
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #fff
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): $sw-color-brand-primary
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #fff
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #fff
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe (Header): #bd3d61
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration" => Rahmenfarbe (Header): #bd3d61
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Textfarbe @active: #fff
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Hintergrundfarbe @active: $twt-color-brand-primary-dark
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #fff
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Dunkel): #564c38
Tab "Layout" => Bereich "Status-Ausgaben" => Fehler: #c82f1e
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #fff
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #fff
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #fff
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung: individuelle Farbe
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #353e49
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #353e49
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #353e49
Tab "Footer" => Bereich "Oberer Bereich" => Abschnitt "Farbkonfiguration" => Textfarbe (Headline): #7f6e43
Tab "Footer" => Bereich "Mittlerer Bereich" => Abschnitt "Farbkonfiguration" => Linkfarbe @hover: #7f6e43
Tab "Footer" => Bereich "Mittlerer Bereich" => Abschnitt "Farbkonfiguration" => Textfarbe (Überschrift): #7f6e43
Tab "Footer" => Bereich "Unterer Bereich" => Abschnitt "Farbkonfiguration" => Linkfarbe @hover: #7f6e43
Tab "Footer" => Bereich "Unterer Bereich" => Abschnitt "Farbkonfiguration" => Textfarbe (Headline): #7f6e43
Tab "Produktseiten" => Bereich "Tabs" => Abschnitt "Farbkonfiguration" => Textfarbe @hover: #7f6e43
Tab "Produktseiten" => Bereich "Tabs" => Abschnitt "Farbkonfiguration" => Textfarbe @active: #7f6e43
Tab "Layout" => Bereich "Hauptfarben" => Sekundärfarbe (Dunkel): #3f5c00
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Hell): #516f11
Tab "Layout" => Bereich "Status-Ausgaben" => Fehler: #c82f1e
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #353e49
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #353e49
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #353e49
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung: individuelle Farbe
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button" => Hintergrundfarbe: #f0f0f0
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe: #bd5200
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Dunkel): #944000
Tab "Layout" => Bereich "Hauptfarben" => Primärfarbe (Hell): #ed6b07
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Hintergrundfarbe: #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Textfarbe: #333
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Rahmenfarbe oben (Copyright): #fafafa
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe: #333
Tab "Footer" => Bereich "Minimaler Footer (im Checkout)" => Abschnitt "Farbkonfiguration" => Linkfarbe (Service-Menü): #333
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration" => Iconfarbe: #ffffff
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Farbkonfiguration" => Iconfarbe @hover: #d8d8d8
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Iconfarbe: #ffffff
Tab "Header" => Bereich "Aktions-Buttons" => Abschnitt "Warenkorb-Button" => Iconfarbe @hover: #d8d8d8
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt" => Textfarbe @active: #dedede
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung: individuelle Farbe
Tab "Widgets" => Bereich "Communities bzw. Social Media" => Abschnitt "Farbkonfiguration" => Icon-Färbung (Sidebar): individuelle Farbe