# Marke: Logo, Farben und Schriften

Geben Sie Ihrer Organisation einen Auftritt. Wählen Sie Ihre Logos, vier Farben und zwei Schriften einmal, und das Portal und Ihre Apps nutzen sie, auch auf den Displays.

> **Typ:** anleitung
> **Für wen:** Inhaber, die den Auftritt der Organisation einrichten. Alle anderen sehen die Seite nur lesend.
> **Voraussetzung:** die Rolle Inhaber, ein Paket mit eigener Marke und Ihr Logo als SVG- oder PNG-Datei mit transparentem Grund
> **Ort im Portal:** **Einstellungen › Organisation › Marke** („Logo, Farben und Schriften Ihrer Organisation. Apps übernehmen sie auf Wunsch mit einem Klick.“)

## Schritte

![Der Bereich Marke mit den Logos für dunkle und helle Flächen (1), den vier Farben Hauptfarbe, Akzent, Dunkel und Hell (2), den Schriften (3), der Vorschau So sieht es auf den Displays aus (4) und der Schaltfläche Speichern (5)](/de/organization/bilder/f9672042-brand-gallery.png)

1. Öffnen Sie **Einstellungen › Organisation › Marke**. Links stehen die Karten **Logo** (1), **Farben** (2) und **Schriften** (3), rechts die Vorschau **So sieht es auf den Displays aus** (4). Im Kopf der Seite stehen **Verwerfen** und **Speichern** (5).
2. Klicken Sie in der Karte **Logo** (1) auf das Feld **für dunkle Flächen** und auf das Feld **für helle Flächen**. Jedes öffnet die Bilder des geschützten Ordners **Markenzeichen**. Wählen Sie ein Bild, oder laden Sie mit **Bild hochladen** ein neues hoch. **Ohne Bild** nimmt die Wahl zurück.
3. Klicken Sie neben **Symbol im Browser-Tab** auf **Wählen** (später **Ändern**) und nehmen Sie ein klar erkennbares Zeichen. Es erscheint winzig im Tab.
4. Liegt ein Logo, liest die Seite seine Farben und schlägt sie unter **Farben aus dem Logo erkannt:** vor. **Übernehmen** setzt sie in den Entwurf. Gespeichert ist damit noch nichts.
5. Stellen Sie in der Karte **Farben** (2) die vier Rollen **Hauptfarbe**, **Akzent**, **Dunkel** und **Hell** ein. Ein Klick auf eine Karte öffnet den Farbwähler. **Dunkel** und **Hell** sind die Gründe, auf denen Ihre Apps stehen. Solange Sie sie nicht selbst wählen, leitet die Seite sie aus der Hauptfarbe ab, und **Aus der Hauptfarbe ableiten** im Farbwähler stellt das wieder her.
6. Lesen Sie die Zeile unter den Farben. Sie prüft jedes Paar, das Ihre Marke auf einer Fläche bildet. Textfarben wählen Sie nicht, die Plattform rechnet sie aus.
7. Wählen Sie in der Karte **Schriften** (3) je eine Schrift für **Überschriften** und **Fließtext**. **Schrift der App** steht oben und heißt: Jede App zeichnet in ihrer eigenen Schrift.
8. Prüfen Sie rechts die Vorschau (4). Sie zeigt bis zu drei Ihrer installierten Apps in den Farben und Schriften des Entwurfs. Der Umschalter **Vorschau** wechselt zwischen **Marke** und **Stil der Apps**.
9. Klicken Sie auf **Speichern** (5). Die Meldung **Marke gespeichert.** erscheint. **Verwerfen** stellt den gespeicherten Stand her.

Solange nichts geändert ist, bleiben **Verwerfen** und **Speichern** gesperrt.

## Wie die Farben geprüft werden

Die Seite prüft sieben Paare, vier mit Text und drei mit Hervorhebungen:

| Paar | Art |
|---|---|
| **Text auf Hauptfarbe**, **Text auf Akzent**, **Text auf Dunkel**, **Text auf Hell** | Text, braucht einen Kontrast von 4,5 : 1 |
| **Akzent auf Hauptfarbe**, **Akzent auf Dunkel**, **Hauptfarbe auf Hell** | Hervorhebung, braucht 3 : 1 |

Die Zeile unter den Farben sagt, wie es steht:

- Grün: **Alle Paare gut lesbar** mit dem kleinsten Kontrast, etwa „7,2 : 1“.
- Gelb: **Gut lesbar, nur schwach** und die Paare mit ihrem Kontrast. Dort stuft die Anzeige die Farbe für Schrift und Zeichen ab. Gespeichert wird trotzdem, ein heller Akzent ist also erlaubt.
- Rot: **Nicht lesbar** und die Paare. Eine Farbe, die ihre Schrift nicht trägt, sperrt **Speichern**. Wählen Sie die Farbe heller oder dunkler.

## Optionen

### Markenfarben in Apps

Eine App übernimmt Ihre Marke nicht von allein. Wählen Sie am Widget im Reiter **Aussehen** unter **Farben** die Stufe **Markenfarben**, siehe [Widgets einstellen: Vorlage, Vorschau und Felder](/de/content/configure-widgets). Das Widget nimmt dann Hauptfarbe, Akzent, Gründe und Schriften von dieser Seite, als Rollen und nicht als Farbtöne.

Nach dem Speichern übernehmen Ihre Displays die neue Marke von selbst. Sie müssen Szenen nicht neu veröffentlichen. Unter der Vorschau steht ein Satz, wie viele App-Inhalte die Markenfarben nutzen, siehe [App-Inhalte anlegen, einstellen und pflegen](/de/content/app-contents).

### Nachrichten-Apps

Bei Nachrichten-Apps wie Tagesschau, NDR, DER SPIEGEL, BILD, Deutschlandfunk und BBC News trägt eine Fläche im Reiter **Aussehen** den Namen der Quelle. Sie bleibt in jeder Farbwahl der dunkle Ton der Quelle, denn die Hausfarbe der Quelle soll erkennbar bleiben. Soll eine Nachrichten-App ganz in Ihren Farben stehen, wählen Sie eine andere Fläche.

### Wo die Bilder liegen

Was Sie hier wählen und hochladen, liegt im geschützten Ordner **Markenzeichen** Ihrer Bibliothek: sichtbar und in Szenen verwendbar, gepflegt aber nur von dieser Seite aus. Ein verwendetes Bild gilt als in Gebrauch und lässt sich nicht löschen. Ein Bild, das als Logo oder Symbol gewählt ist, lässt sich auch nicht entfernen: Wählen Sie zuerst ein anderes.

### Wenn das Paket die eigene Marke nicht enthält

Dann steht der Bereich mit einem Schloss („Ab“ und dem Namen des Pakets). Bereits Hinterlegtes bleibt und wirkt weiter. Gesperrt ist nur der Weg zu etwas Neuem. **Pakete ansehen** führt zur Abrechnung.

## Ergebnis prüfen

- Im Kopf der Seitenleiste steht Ihr **Logo**. Ohne Logo steht dort der Anzeigename als Text.
- Im Browser-Tab steht Ihr Symbol statt des Standard-Symbols.
- Die **Hauptfarbe** färbt Schaltflächen, den Fokusrahmen und den aktiven Eintrag der Seitenleiste.
- Die Vorschau und jedes Widget in Markenfarben zeigen dieselben Farben und Schriften.
- Ein Bildschirm ohne Zuweisung zeigt den Platzhalter Ihrer Organisation.
- Auf dem **Dashboard** gilt der Einrichtungs-Schritt **Markenzeichen hochladen** als erledigt.

Auf der Anmeldeseite wirkt keine dieser Angaben: Die Marke vorher nachzuschlagen hieße, jedem Besucher zu verraten, welche Organisation hinter einer Adresse steht.

## Wenn etwas nicht klappt

| Symptom | Ursache | Lösung |
|---|---|---|
| **Nicht lesbar:** … steht rot unter den Farben, **Speichern** ist gesperrt | Eine Farbe trägt ihre Textfarbe nicht, der Kontrast liegt unter 4,5 : 1. | Wählen Sie die genannte Farbe heller oder dunkler. |
| **Gut lesbar, nur schwach:** … | Ein Akzent oder die Hauptfarbe wirkt als Zeichen auf einem Grund zu blass. | Gespeichert wird trotzdem. Soll die Hervorhebung voll wirken, wählen Sie die Farbe kräftiger. |
| **Die Marke ließ sich nicht speichern.** | Die Plattform hat den Entwurf abgelehnt oder war nicht erreichbar. | Prüfen Sie die Farben und klicken Sie erneut auf **Speichern**. |
| **Das Bild ließ sich nicht entfernen. Ist es als Logo oder Favicon gewählt, wählen Sie zuerst ein anderes.** | Das Bild ist in Gebrauch. | Wählen Sie ein anderes Bild, speichern Sie, und entfernen Sie dann das alte. |
| **Das Bild ließ sich nicht hochladen.** | Die Datei wurde abgelehnt, oder die Übertragung brach ab. | Wählen Sie eine SVG- oder PNG-Datei mit transparentem Grund und laden Sie sie erneut hoch, siehe [Dateitypen, Größen und Speicherplatz](/de/content/file-types-and-storage). |
| Das Logo bleibt aus, obwohl es im Feld steht | Gewählt, aber nicht gespeichert. | Klicken Sie auf **Speichern**. |
| Über den Karten steht **Nur lesend.** | „Sie können die Marke einsehen. Ändern dürfen sie Konten mit der Rolle Inhaberin oder Verwaltung.“ | Bitten Sie einen Inhaber, siehe [Rollen und Rechte](/de/organization/permissions-by-role). |
| Statt der Vorschau steht **Noch keine App für die Vorschau** | Keine der Vorschau-Apps ist installiert. | Installieren Sie Wetter, Öffnungszeiten oder Aushang. |

## Weiterführendes

- [Widgets einstellen: Vorlage, Vorschau und Felder](/de/content/configure-widgets)
- [Das Portal unter der eigenen Adresse](/de/organization/custom-address)
- [Pakete, Testphase und wofür Sie zahlen](/de/billing/about-packages-and-seats)