BHT Campus Hub ist die zentrale App für Orientierung, Studium und Campusleben an der BHT.
BHT Campus Hub
Übung 08B
Farbschema finalisieren
Entwicklung eines Farbschemas basierend auf dem BHT-Styleguide mit Light- und Dark-Mode
App-Idee in drei Zeilen
BHT Campus Hub
BHT Campus Hub ist der smarte Campus-Begleiter: Wegfinden, Studienorganisation und Services an einem Ort vereint.
02
Dashboards und Inhalte passen sich Rolle, Standort und Tageskontext an.
03
So finden Studierende, Lehrende und Gäste schnell Räume, Fristen, Services und Kontakte.
BHT Corporate Farbpalette
#555555
Anthrazit
Neutralfarbe, Sekundärtext, Borders
#004282
Blau
Primäre Interaktionsfarbe im Light Mode
#FFC900
Gelb
Interaktion im Dark Mode, Highlights auf dunklem Grund
#00A0AA
Petrol
Info/Erfolg nur als große Labels, Icons oder Flächen
#EA3B07
Rot
Warnung/Fehler nur als große Labels, Icons oder Flächen
Anthrazit-Skala (abgeleitet von #555555)
50#F2F2F2
100#E6E6E6
200#CCCCCC
300#B3B3B3
400#999999
500#555555
600#444444
700#333333
800#222222
900#111111
Zwei Farbschemata im Vergleich
Kontrastprüfung nach WCAG
| Vordergrund | Hintergrund | Ratio | AA | AAA |
|---|---|---|---|---|
#000000 | #FFFFFF | 21.00:1 | Bestanden | Bestanden |
#FFFFFF | #000000 | 21.00:1 | Bestanden | Bestanden |
#555555 | #FFFFFF | 7.46:1 | Bestanden | Bestanden |
#004282 | #FFFFFF | 9.99:1 | Bestanden | Bestanden |
#FFC900 | #000000 | 13.61:1 | Bestanden | Bestanden |
#FFFFFF | #555555 | 7.46:1 | Bestanden | Bestanden |
#FFC900 | #555555 | 4.83:1 | Bestanden | Nicht bestanden |
#00A0AA | #FFFFFF | 3.18:1 | Nicht bestanden | Nicht bestanden |
#EA3B07 | #FFFFFF | 4.10:1 | Nicht bestanden | Nicht bestanden |
Interaktionsfarbe & Nutzungsregeln
Light Mode · Interaktionsfarbe
Aa
#004282
Buttons, Links, aktive Tabs
Dark Mode · Interaktionsfarbe
Aa
#FFC900
Buttons, Links, aktive Tabs
Light Mode
- •Blau #004282 ist die primäre Interaktionsfarbe für Buttons, Links und aktive Navigation
- •Gelb #FFC900 auf Weiß vermeiden, da der Kontrast nur 1.54:1 beträgt
- •Petrol #00A0AA auf Weiß nur als AA18 für große Labels, Icons oder Statusflächen einsetzen
- •Rot #EA3B07 auf Weiß nur als AA18 für große Warnlabels, Icons oder Statusflächen einsetzen
- •Schwarz #000000 und Anthrazit #555555 sichern die Lesbarkeit auf Weiß
Dark Mode
- •Gelb #FFC900 nur auf schwarzen oder anthrazitfarbenen Hintergründen als Interaktion verwenden
- •Weiß #FFFFFF für primären Text und BHT-Gelb für Buttons und aktive Tabs
- •Petrol #00A0AA und Rot #EA3B07 bestehen auf Schwarz AA und bleiben semantische Statusfarben
- •Blau #004282 nicht auf Anthrazit #555555 verwenden, da der Kontrast nicht ausreicht
- •Anthrazit-Varianten erzeugen Flächen, Borders und Tiefe im Dark Mode
Entscheidung für das Farbschema
Fazit
Warum Light Mode?
Der Light Mode mit weißem Hintergrund und Blau #004282 als alleiniger Interaktionsfarbe ist die robustere Wahl für den Campus-Alltag. Primäre Lese- und Interaktionsfarben erreichen AAA. Petrol und Rot bleiben bewusst auf große Labels, Icons oder Statusflächen begrenzt.
1
Kontrast
Primäre Lese- und Interaktionsfarben erreichen AAA
#000000, #555555 und #004282 auf Weiß liegen bei 7.46:1 bis 21.00:1. Damit sind Haupttext, Sekundärtext und Interaktion klar abgesichert.
2
Farblogik
Statusfarben sind bewusst begrenzt
Petrol #00A0AA erreicht auf Weiß nur 3.18:1 AA18, Rot #EA3B07 nur 4.10:1 AA18. Beide werden deshalb nicht für kleine Texte oder zentrale Navigation genutzt.
3
Interaktion
BHT-Blau als eindeutiger Aktionscode
Blau #004282 bleibt die einzige Interaktionsfarbe im gewählten Light Mode. Dadurch sind Links, Buttons und aktive Navigation sofort erkennbar.
Logo, Splashscreen und App-Icon
a) Ladebildschirm
b) App-Icon einzeln
Campus Hub
Eingesetzte Variante: Campus-Hub-Logo hell auf dunklem Hintergrund mit ausreichendem Kontrast und unveränderten Proportionen.
App-Icon auf Homescreen
Screens 01
Screens 02
Screens 03
