Die farbliche Gestaltung des Widgets ermöglicht eine nahtlose Einbindung des KI-Chatbots in den Markenauftritt. Durch die Definition von zentralen Farbwerten wird eine konsistente Nutzer:innen-Erfahrung geschaffen, die das Vertrauen stärkt und die visuelle Hierarchie innerhalb des Chat-Fensters unterstützt.
Der Zugriff auf den Widget-Editor erfolgt über den Menüpunkt Widget & Teaser → Widget Darstellung.
- Grund- und Sekundärfarbe
- Farbzuweisung bei Widget-Elementen
- Kontrast-Optionen
- Best Practice: Do's & Don'ts
Die in diesem Artikel gewählten zwei Farben (Blau-Töne) sind lediglich Beispiele. Im Widget-Editor können die Farben frei ausgewählt werden.
Die Konfiguration der Widget-Farben erfolgt im Abschnitt Darstellung. Hier werden zunächst zwei zentrale Farbwerte festgelegt, die als Basis für das gesamte Erscheinungsbild des Widgets dienen.
- Grundfarbe: Primärer Farbton für prominente Elemente
- Sekundärfarbe: Ergänzender Farbton für Akzente oder zur Abgrenzung von Inhalten
Die Farben können im entsprechenden Feld als Hex-Code oder mit Klick auf die Farbe als RGB-Farbcode eingetragen werden.
Änderungen an diesen zentralen Werten wirken sich global auf alle zugewiesenen Elemente aus. Dies ermöglicht eine effiziente Steuerung des farblichen Gesamteindrucks von einer zentralen Stelle aus.
2. Farbzuweisung bei Widget-Elementen
Nachdem Grund- und Sekundärfarben definiert wurden, erfolgt die individuelle Zuweisung zu den funktionalen Bestandteilen. Dies erlaubt eine flexible Gestaltung, um beispielsweise den Fokus auf bestimmte Interaktionspunkte zu lenken.
Für folgende Bestandteile können im Abschnitt Elemente anpassen Farben zugewiesen werden: Widget-Button, Header (Kopfleiste) und Sprechblase der Nutzer:innen.
Die Zuweisung wird im Editor durch einfache Auswahl der jeweiligen Farbe für das entsprechende Element vorgenommen. Eine Live-Vorschau auf der rechten Seite visualisiert die Änderungen unmittelbar.
3. Kontrast-Optionen
Zur Sicherstellung der Barrierefreiheit und Lesbarkeit steht für jedes einfärbbare Element eine Kontrast-Option (hell oder dunkel) zur Verfügung. Diese Einstellung bestimmt die Farbe von Texten und Symbolen (z. B. das X-Schließen-Symbol oder die Sprechblase im Button) auf dem gewählten Hintergrund.
- Hell: Weißer Text und Symbole, die sich für dunkle Hintergründe eignen.
- Dunkel: Schwarzer Text und Symbole, die sich für helle Hintergründe eignen.
Der Farb-Kontrast-Button nach WCAG 2.1 gibt Auskunft darüber, ob der Kontrast im ausgewählten Element hoch genug ist.
Ein unzureichender Kontrast führt dazu, dass Bedienelemente oder Nachrichten für Nutzer:innen nicht erkennbar sind. Die Wahl der Kontrast-Option sollte daher immer auf Basis der Helligkeit der gewählten Grund- oder Sekundärfarbe erfolgen.
Mehr Informationen zum Farbkontrast nach WCAG 2.1 und barrierefreier Gestaltung finden sich in diesem Artikel.
4. Best Practice: Do's & Don'ts
In den folgenden Beispielen sind bewusst die Grundfarbe besonders dunkel und die Sekundärfarbe besonders hell gewählt, um die unterschiedlichen Varianten für jedes Element zu illustrieren.
Widget-Button
Im folgenden Beispiel haben die erste und die letzte Variante einen zu schwachen Kontrast. Die Sprechblase im Widget-Button ist nicht gut zu erkennen. Hier ist es besser, die zweite oder die dritte Variante zu wählen.
Widget-Header
Im folgenden Beispiel haben die erste und die letzte Variante einen zu schwachen Kontrast in der Kopfleiste. Besonders in der ersten Variante ist der Text kaum zu erkennen. Hier sollte Variante zwei oder drei gewählt werden.
Sprechblase (Nutzer:innen)
Ähnlich wie beim Header (Kopfleiste), ist der Text in der ersten Sprechblasen-Variante kaum zu erkennen. In der vierten Variante ist der Kontrast ebenfalls zu schwach. Die Varianten zwei und drei sind gut lesbar.
Mehr Anpassungsmöglichkeiten des Widgets finden sich in diesem Artikel.