Wofür du den Check brauchst
Farben im Corporate Design sind selten so eindeutig dokumentiert, wie man denkt. Die Website nutzt ein anderes Blau als die Präsentationsvorlage, das Logo hat einen dritten Ton, und welche Farbe Text tragen darf, steht nirgends. Der Styleguide-Check macht sichtbar, welche Farben in einem Bild wirklich vorkommen und wie gut sie zusammen lesbar sind. Das hilft vor einem neuen Film, vor einer neuen Folienvorlage oder bei der Frage, warum die Bauchbinde im letzten Imagefilm so schwer zu lesen war.
So benutzt du den Check
- Mach einen Screenshot einer typischen Seite deiner Website oder exportiere eine Folie aus der Präsentationsvorlage. Ein Logo funktioniert auch.
- Zieh das Bild in das Feld oder wähl es aus.
- Lies die Palette: Jede Farbe bekommt eine Rolle und ihren Farbwert.
- Prüf die Kontrastwerte. Sie zeigen, welche Farbpaare für Text taugen und welche eher für Flächen.
Die fünf Rollen der Palette
| Rolle | Wofür sie steht |
|---|---|
| Grund | die Fläche, auf der alles liegt, meist der Hintergrund |
| Tinte | die Farbe für Text und feine Linien |
| Akzent | die Markenfarbe, die den Blick lenkt |
| Zweitakzent | eine zweite Farbe für Abwechslung und Hervorhebungen |
| Zart | ein heller oder gedämpfter Ton für Kästen und ruhige Flächen |
Die Rollen sind ein Vorschlag. Was die größte Fläche einnimmt, wird eher Grund, was sich am stärksten davon abhebt, eher Tinte, kräftige Farben werden Akzente.
Wie die Kontrastwerte zustande kommen
Die Kontrastwerte folgen den Web Content Accessibility Guidelines (WCAG). Für jede Farbe berechnet der Check die relative Leuchtdichte, also wie hell das Auge sie wahrnimmt. Aus zwei Farben ergibt sich ein Verhältnis zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß). Für normalen Fließtext verlangt die Stufe AA mindestens 4,5:1, für großen Text und grafische Elemente 3:1. Die strengere Stufe AAA verlangt für Fließtext 7:1.
Im Film zählt Lesbarkeit noch mehr als auf der Website. Text steht nur wenige Sekunden im Bild, oft auf einem Smartphone im Hochformat.
Was der Check nicht kann
- Ein Bild zeigt nur einen Ausschnitt. Farben, die auf diesem Screenshot fehlen, fehlen auch in der Palette.
- Fotos bringen viele Misch- und Hauttöne mit. Für Markenfarben eignen sich Screenshots mit Flächen und Text besser.
- Kantenglättung und Kompression erzeugen Zwischentöne. Die Farbwerte können deshalb leicht von den Werten im Designhandbuch abweichen.
- Schriften, Formen, Bildstil und Bewegung liest der Check nicht.
Der Unterschied zum Motion-Styleguide in mint
Der Check liest nur die Farben aus einem Bild. Der Motion-Styleguide in mint entsteht aus Website, Präsentation, Bildern oder einem Video und enthält Farbwelt mit Rollen, Schriften und Typoskala, Formensprache, Bildstil, Layouts in 16:9, 9:16 und 1:1, Übergänge und Bewegungsprinzipien. Dazu kommen Regeln, zum Beispiel für Kontraste und Mindestgrößen. Die automatische Qualitätsprüfung achtet bei jedem Film unter anderem auf Mindestschriftgröße, Textüberlauf und Ränder. Der Styleguide wird einmal in etwa 60–90 Minuten angelegt, danach wird aus jedem Briefing ein Film in genau diesem Design.
Wie solche Styleguides aussehen, zeigen die Beispiele für Motion-Design-Styleguides. Den Hintergrund erklärt der Ratgeber Was genau ist ein Motion-Styleguide?. Wie du das Corporate Design über viele Filme hinweg hältst, steht unter Corporate Design in Videos einhalten.