Die fünf Farbrollen
Unter „Design“ und „Farben“ steht „Deine Farbpalette“. Jede Farbe hat eine Aufgabe: „Hintergrund“ ist der Grund der ganzen Seite, „Fläche“ alles, was darauf liegt — Karten, Kästen, Felder. „Textfarbe“ gilt für den Fließtext, „Akzentfarbe“ für Knöpfe, Verweise und alles, was handelt. „Schrift auf Knöpfen“ ist die Beschriftung auf dem Akzent; lässt du sie leer, rechnen wir sie so, dass sie lesbar ist.
Du setzt eine Farbe mit einem Klick auf ihr Farbfeld oder tippst den Hex-Wert darunter ein, etwa #8A4B2E, und bestätigst mit Enter. Ein gestricheltes Feld heißt: noch nicht gesetzt, die Vorlage entscheidet. Das × neben einer gesetzten Farbe gibt sie wieder frei, und das kleine i neben jeder Rolle erklärt sie in einem Satz.
- Öffne „Design“ und wähle „Farben“.
- Klicke auf das Farbfeld einer Rolle oder tippe ihren Hex-Wert ein.
- Sieh in der Vorschau nach — gespeichert wird von selbst.
Kombinationen am Farbrad
„Farbkombinationen entdecken“ klappt das Farbrad auf. Sein großer Punkt ist die „Basisfarbe“, und die ist deine Akzentfarbe: Was du am Rad wählst, wird sofort als Akzentfarbe gespeichert. Du ziehst den Punkt mit Maus oder Finger; hat er den Fokus, gehen auch die Pfeiltasten, mit der Umschalttaste in größeren Schritten. Der Regler „Helligkeit“ darunter macht die Farbe heller oder dunkler.
Daneben wählst du eine „Harmonie“: „Analog“, „Monochrom“, „Komplementär“, „Split-Komplementär“, „Triade“, „Quadrat“, „Schattierungen“ oder „Eigene“. Die „Palette“ darunter zeigt die passenden Farben mit Hex-Wert; „Als …“ unter einer Farbe legt sie auf eine einzelne Rolle.
„Auf die Marke legen“ verteilt die Palette auf einmal: die Basis als Akzent, dazu ein heller Hintergrund, eine helle Fläche, eine dunkle Textfarbe und eine Knopfschrift in Schwarz oder Weiß — lesbar gerechnet. Danach kannst du jede Rolle einzeln ändern.
- Klappe unter „Farben“ „Farbkombinationen entdecken“ auf.
- Zieh den großen Punkt auf deine Hauptfarbe und wähle eine Harmonie.
- Klicke auf „Auf die Marke legen“.
Lesbarkeit
Unter der Palette misst der Kasten „Lesbarkeit“ vier Farbpaare: „Text auf Hintergrund“, „Text auf Fläche“, „Schrift auf Knöpfen“ und „Akzent auf Hintergrund“ — nach WCAG, mindestens 4,5:1. Jedes Paar zeigt seinen Kontrast und ein Urteil in Worten: „Sehr gut lesbar“, „Gut lesbar“, „Knapp — schwer zu lesen“ oder „Nicht lesbar“. Ein Paar, von dem eine Farbe noch nicht gesetzt ist, wird nicht gemessen.
Ist ein Paar nicht lesbar, steht die Warnung an beiden Farben („Zu wenig Kontrast zu: …“) und im Kasten die Folge je Tool. „Wird ersetzt in: …“ heißt, dieses Tool zeigt dort statt deiner Farbe eine lesbare — Website, Formular und WordPress Schwarz oder Weiß, der Laden zuerst seine eigene Farbe. „Bleibt so in: …“ heißt, das Tool zeigt genau deine Farben, auch wenn sie schwer lesbar sind.
Darunter steht dann „So wird es lesbar“: bis zu drei fertige Paletten, in denen jedes Paar besteht. Wir rechnen alle Paare zusammen, damit keine Korrektur ein anderes Paar bricht — jede Farbe wird nur heller oder dunkler und behält ihren Farbton; die Schrift auf Knöpfen bleibt deine Farbe oder wird Schwarz oder Weiß. Eine kleine Vorschau zeigt je Vorschlag die vier Paare, daneben steht, welche Farbe wie wandert. „Übernehmen“ legt die Palette auf deine Marke, „Rückgängig“ holt deine Farben zurück.
Lesbare Farben helfen allen: Menschen, die schlecht sehen, und allen, die im Sonnenlicht aufs Handy schauen.
Kontrast im Detail prüfen
„Kontrast im Detail prüfen“ nimmt sich ein Paar genau vor. Oben wählst du das Paar; groß steht sein Verhältnis, etwa 5,20 : 1. Darunter stehen Vordergrund und Hintergrund, je mit Farbfeld und einem Regler „Helligkeit“ — was du hier änderst, ändert die Farbe deiner Marke.
Die Tabelle zeigt, welche Stufen das Paar schafft: „Großer Text“, „Kleiner Text“ sowie „Grafik und Bedienelemente“, je für AA und AAA mit „Besteht“ oder „Fällt durch“. Fließtext braucht 4,5:1, große Überschriften 3:1; für einen Akzent neben dem Grund reichen 3:1. Daneben siehst du das Paar als kleine Seite mit Überschrift und Absatz.
Reicht der Kontrast nicht, erscheinen „Vorschläge — derselbe Ton, nur heller oder dunkler“: Ein Klick legt die vorgeschlagene Farbe auf die Rolle. Geht es mit dem Farbton gar nicht, sagt der Kasten, dass du eine der beiden Farben neu wählen musst.
- Klappe unter „Farben“ „Kontrast im Detail prüfen“ auf.
- Wähle oben das Paar, das nicht lesbar ist.
- Klicke auf einen Vorschlag oder zieh den Regler „Helligkeit“, bis „Besteht“ erscheint.