SharePoint-Themes: Markenfarben mit Kontrast statt Kompromiss
Laura Stess
Das Theme ist das Erste, was Mitarbeitende an einem neuen Intranet bemerken: Kopfbereich, Buttons, Links – plötzlich ist alles in den Unternehmensfarben. Ein eigenes Theme in SharePoint einzurichten, ist technisch schnell erledigt. Die eigentliche Arbeit beginnt danach: dafür zu sorgen, dass wirklich überall alles lesbar bleibt.
Was ein Theme in SharePoint steuert
Ein SharePoint-Theme ist im Kern eine Farbpalette: eine Primärfarbe mit Abstufungen, dazu neutrale Töne für Hintergründe und Texte. Eigene Themes werden von Administrator:innen zentral für den Tenant bereitgestellt – etwa per PowerShell mit Add-SPOTheme – und stehen dann allen Websites unter Einstellungen → Aussehen ändern → Design zur Auswahl. Die Palette wirkt an vielen Stellen gleichzeitig: in Header und Navigation, bei Buttons und Links, in Abschnittshintergründen und Webparts.
Die Kontrast-Falle
Genau diese Verteilung macht Themes tückisch. Ich hatte einen Fall, in dem die Metadaten in den Seitendetails einwandfrei lesbar waren – in den Detailansichten von Dateien und Listen dagegen kaum. Die naheliegende Vermutung: Beide Ansichten greifen auf unterschiedliche Theme-Farben zurück. Kolleg:innen berichteten zusätzlich, dass die Schrift beim Setzen von Metadaten kurz weiß erscheint und dann in ein kaum lesbares Grau wechselt.
Die Lehre daraus: Ein Theme ist erst dann fertig, wenn es in allen Ansichten funktioniert – nicht nur auf der Startseite.
Erst in der Testumgebung, dann live
Neue Themes spiele ich deshalb zuerst in einem Test-Tenant ein und prüfe sie dort systematisch, bevor sie produktiv gehen. Wichtig ist, dass Test- und Produktivumgebung anschließend wirklich dasselbe Theme verwenden – sonst testet man am Ende etwas anderes, als die Nutzer:innen sehen.
Mehr als nur die Primärfarbe tauschen
Ein häufiger Wunsch lautet: „Können wir das einfach in unseren Farben haben?“ Die ehrliche Antwort: Einfach die Primärfarben austauschen – von Gelb zu Violett oder von Schwarz zu Weiß – funktioniert selten. Mit jeder Farbe verändern sich Kontraste, Hierarchien und die Wirkung von Zuständen wie Hover oder Disabled. Deshalb gehört zu jedem Farbwechsel ein UX-Blick.
Was hilft, ist ein sauber aufgebautes Farbsystem: Wenn Rollen wie Primär, Akzent, Hintergrund und Text sowie die einzelnen Zustände als eigene Farbwerte definiert sind, lässt sich ein neues Theme mit überschaubarem Aufwand anpassen. Auch eigene Webparts und Icons sollten die Theme-Farben nutzen statt fest eingetragener Werte – dann passt das Gesamtbild auch nach einem Farbwechsel.
Faustregel für Kontraste: Nach WCAG 2.1 (Stufe AA) braucht normaler Text ein Kontrastverhältnis von mindestens 4,5 : 1. Großer Text und wichtige Bedienelemente wie Icons oder die Rahmen von Eingabefeldern brauchen mindestens 3 : 1.
Meine Theme-Checkliste
- Palette aus dem Corporate Design ableiten: Primärfarbe, Akzente und neutrale Töne festlegen.
- Kontraste prüfen: Text, Links, Buttons und Icons gegen alle Hintergründe testen.
- In der Testumgebung ausrollen: Seiten, News, Listen, Bibliotheken, Detailbereiche, Formulare und die Suche durchklicken.
- Eigene Webparts angleichen: Icons, Hinweise und Akzente an die Theme-Farben koppeln.
- Dokumentieren: Das Theme gehört in den Design-Guide – mit Farbwerten und Einsatzregeln.
- Live gehen und zuhören: Feedback der Nutzer:innen ernst nehmen und nachjustieren.
