Color Settings

In diesem Theme-Abschnitt finden Sie alle Einstellungen, um Ihre Website mithilfe von Farben unverwechselbar zu gestalten.

Reiter: »Color«

Schritt für Schritt

Bei Hintergrundfarbe stellen Sie mit einem HTML-Code die Hintergrundfarbe Ihrer Website ein.
Klicken Sie den Reiter Farbe.
Für die Farbauswahl stehen Ihnen in der Hintergrundfarbe-Fläche die Auswahl via Cursor im Farbfeld sowie die Eingabe des Hex-Werts zur Verfügung.
Den Hex-Wert bildet den RGB-Wert in einer sechsstelligen Buchstaben- oder Zahlenkombination ab. Er eignet sich, wenn Sie bereits die genaue Farbe kennen. Für die Hex-Werte finden Sie unzählige Farbtafeln im Netz.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Stellen Sie die Schriftfarbe Ihrer Website ein. Definieren Sie einen Basiswert sowie eine helle und eine dunkle Variante in den jeweiligen Schriftfarben-Fläche.
Für die Farbauswahl stehen Ihnen die Auswahl via Cursor im Farbfeld sowie die Eingabe des Hex-Werts zur Verfügung.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Die Primärfarbe Ihrer Website definieren Sie in der Primärfarben-Fläche. Auch hier lässt sich ein Basiswert samt einer hellen und eine dunklen Variante festlegen.
Cursor im Farbfeld und Eingabe des Hex-Werts stehen Ihnen auch hier wieder für die Farbauswahl zur Verfügung.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Analog zur Primärfarbe legen Sie auch für die Sekundärfarbe die gewünschten Farbcodes fest.
Auch hier bestehen die drei Optionen Basiswert, helle und dunkle Alternative, die Sie via Cursor im Farbfeld sowie die Eingabe des Hex-Werts bestimmen.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Bestimmte Dialogmeldungen und Systemantworten können farblich betont werden, hier bei den Eingabefeldern Farbe für Erfolgsmeldungen, Farbe für Warnungen und Farbe für Fehlermeldungen.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Hier legen Sie fest, welches der eingestellten Farbsets für die Navigation am Desktop sowie an mobilen Geräten verwendet wird. Für die Desktop Navigation werden die Werte Primärfarben, Sekundärfarben und Schriftfarben angeboten, für die Mobile Navigation nur Primärfarben sowie Sekundärfarben.
Klicken Sie über der Arbeitsfläche auf den Button Speichern.

In toujou können Sie Ihre eingestellten Farben auf ausreichenden Kontrast hinsichtlich Barrierefreiheit / WCAG testen und erhalten auch Beispiele für verschiedene Anwendungsfälle der Schrift-, Primär-, und Sekundärfarben.
Die Farbkontraste aktivieren Sie über den Button Kontrasttestergebnisse anzeigen.
Für die Anzeige der Beispiele aktivieren Sie die Ansicht via Button Farbvorschauen anzeigen.
Unter Erforderliche Kontrastverhältnisse für die WCAG-Konformität erhalten Sie zusätzliche Informationen die Farbkontraste betreffend.

Nach Aktivierung Farbkontrastergebnisse erhalten Sie eine Analyse, die sich an der Hintergrundfarbe orientiert. Angezeigt werden Ergebnisse zur Schriftfarbe, (hier beispielhaft markiert), Primärfarbe, Sekundärfarbe sowie Signalfarben.
Grün bedeutet, das ausreichend Kontrast im Sinne der Barrierefreiheit / WCAG besteht. Rot signalisiert Verbesserungsbedarf.
Die Ansicht deaktivieren Sie durch erneuten Klick auf den Button Kontrasttestergebnisse ausblenden.

Die von Ihnen vorgenommenen Farb-Einstellungen können Sie für verschiedene Anwendungsfälle auf Ihrer Website beispielhaft darstelllen.
Dazu gehören Headlines, Bulletpoints, Linkbuttons, Checkboxen in Formularen sowie Meldungs-Buttons, die Sie über die Signalfarben definieren.
Aktivieren Sie die Ansicht durch Klick auf den Button Farbvorschauen anzeigen. Durch Klick auf den Button Farbvorschauen ausblenden deaktivieren Sie die Ansicht.

Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen.