Erscheinungsbild
Farben
Um das Farbschema Ihrer Organisation in FTAPI widerzuspiegeln, können Sie vier Farbwerte anpassen. Diese können Sie frei auswählen. Wir empfehlen jedoch die folgenden zwei Regeln bei der Farbauswahl zu beachten.
Farbverlauf
Orientieren Sie sich bei Ihrer Farbanpassung an dem von FTAPI vorgeschlagenen Farbverlauf. Bedeutet: wählen Sie eine Hauptfarbe aus, von der aus verschiedene Helligkeitsstufen gesetzt werden.
| Standard | ✔︎ Korrekte Anpassung | ❌ Falsche Anpassung | |
|---|---|---|---|
| Zeilen | #EEF4E7 | #EDEDFD | #EDEDFD |
| Zeilen-Hover | #DDE8CF | #DBDBFF | #DBDBFF |
| Haupt-Thema | #19853F | #4058E0 | #BF1D1D |
| Haupt-Hover | #0B7530 | #2D40BD | #2D40BD |
| Farben spiegeln vorgeschlagenen Farbverlauf wider. | Farben weichen von vorgeschlagenem Farbverlauf ab. |
Farbkontrast
Der Farbkontrast sollte stark genug sein, um die Lesbarkeit von weißem Text auf der Haupt-Thema und Haupt-Hover Farbe sicherzustellen.
Beide sollten die Anforderungen der Stufe AA der Web Content Accessibility Guidelines (WCAG) 2.2 erfüllen. Dies kann mit jedem üblichen Farbkontrasttool geprüft werden (z.B. WEB AIM Contrast Checker).
| Standard | ✔︎ Korrekte Anpassung | ❌ Falsche Anpassung | |
|---|---|---|---|
| Zeilen | #EEF4E7 | #EDEDFD | #EDEDFD |
| Zeilen-Hover | #DDE8CF | #DBDBFF | #DBDBFF |
| Haupt-Thema | #19853F | #4058E0 | #7575FF |
| Haupt-Hover | #0B7530 | #2D40BD | #2D40BD |
| Kontrast ist hoch genug, damit der weiße Text lesbar ist. | Kontrast ist zu niedrig. |
Firmenlogo
Empfohlene Größe: 260px x 100px SVG, PNG oder JPEG
Das Firmenlogo wird an zentralen Stellen platziert, um den Nutzern bei den ersten Interaktionen Orientierung zu bieten und das Vertrauen in die Plattform zu stärken (e.g. E-Mails, Login, Zustellung herunterladen).
Hierfür werden Logos in Querformat oder quadratische Logos empfohlen. Hochkantige Firmenlogos sind grundsätzlich nicht für Webanwendungen geeignet, können aber trotzdem hochgeladen werden. Ein Firmenlogo größer 260px x 100px, wird automatische verkleinert. Kleinere Firmenlogos werden nicht automatische vergrößert.
Icon
Empfohlene Größe: 64px x 64px SVG oder PNG (auch die Formate GIF und ICO sind möglich)
Das Icon ist ein quadratisches Logo, welches im Browser Tab und in der In-App Navigation angezeigt wird. Kleinere oder größere Icons werden automatisch an 32px x 32px angepasst.