Farbschema

Diese Seite beschreibt das gesamte Farbschema, welches zentral definiert ist und problemlos in den Auftritten verwendet werden darf.

Grundfarben

Diese Farben stellen die Basis für die Gestaltung der Seite dar. Der Umfang ist im Moment relativ beschränkt und sollte durch weitere (Abstufungen) Farben ergänzt werden um spezielle Optionen (z.B. :hover-Effekte) einfacher umzusetzten.

Farbe Name Farbcode
  Weiß / White #ffffff
  Schwarz / Black #000000
  UniBw Organge #ED6600
  UniBw Grau #6A686F
  Blau / dark-blue #003366
  Schwarz (Minus-One) #111111
  Schwarz (Minus-Two) #282828
  Grau (Dunkel) / middle-grey #8B8891
  Grau (Hell) / light-grey #E6E6E6
  rust-red #CC3300
  dark-yellow #FFCC66
  ruddy-beige #C09F80
  warm-blue #336699
  creamy-red-wine #984b43

Sonderfarben - Link-Filtermodul

Hier geht es um Sonderfarben zu indentifizieren von Bereichen, hierzu sollen diese farben konsistent eingesetzt werden. Wichtig beim Filtermodul ist, dass der Informationsträger nicht ausschließlich die Farbe ist, also auch eine Überschrift verwendet wird, deswegen auch das Kontrastverhältnis zu Weiss (#FFFFFF;), bzw. zu Schwarz (#000000;). Hier sollte immer das bessere Kontrasverhältnis gewählt werden.

Farbe Name Farbcode Schwarz auf Farbe Kontrastverhältnis (Schwarz auf Farbe) Weiss auf Farbe Kontrastverhältnis (Weiss auf Farbe)
  rustred (Studium) #cc3300 Text FAIL: 4.04:1 Text Acceptable (AA): 5.2:1
  (Körper und Seele / Für die Seele) #50A2E8 Text OK: 7.67:1 Text FAIL: 2.74:1
  (Körper und Seele / Für die Seele) #38d1e8 Text OK: 11.45:1 Text FAIL: 1.83:1
  dark-yellow (Personal) #ffcc66 Text OK: 14.08:1 Text FAIL: 1.49:1
  (Service / IT-Dienste) #C09F80 Text OK: 8.51:1 Text FAIL: 2.47:1
  warm-blue (Forschung) #336699 Text FAIL: 3.5:1 Text Acceptable (AA): 6:1
  Lila (Verpflegung) #7F38E8 Text FAIL: 3.63:1 Text Acceptable (AA): 5.78:1
  UniBw Orange (Übergreifende Dienste) #ed6600 Text Acceptable (AA): 6.5:1 Text FAIL: 3.23:1
  Lila (Forschung) #6c387B Text FAIL: 2.49:1 Text OK: 8.44:1
  Blau #003366 Text FAIL: 1.67:1 Text OK: 12.61:1
  Grau (Personen) #898E92 Text Acceptable (AA): 6.35:1 Text FAIL: 3.31:1
  Grau (Personen) #8b8891 Text Acceptable (AA): 6.03:1 Text FAIL: 3.48:1
  Pink (Weiterbildung) #B30557 Text FAIL: 3.08:1 Text Acceptable (AA): 6.83:1
  (Militärisches) #984B43 Text FAIL: 3.42:1 Text Acceptable (AA): 6.14:1
  olivegrün (Militärisches) #46512F Text FAIL: 2.48:1 Text OK: 8.47:1

Textfarben auf Hintergrund

Es sollte ein Kontrastverhältnis von mindestens 7:1 eingehalten werden (AAA) Level, in besonderen Ausnahmen kann auf eine Kontrastverhältnis von mindestens 4.5:1 (AA) zurückgefallen werden. Die WCAG sieht eine weitere minimal Kontraststufe von 3:1 vor, diese ist aber auf "Großschrift" Elemente (klassischerweise Überschriften) begrenzt. Dies sollte aber absolute ausnahme sein, einzig die CI-Farbe UniBw Orange (#ED6600) mit einem Kontrastverhältnis von 3.23:1 auf Weißem Hintergrund sollte in diesem Zusammenhang tolleriert werden.

Farbe-Kombination Namen Farbcode Kontrast
Text Schwarz / Black - Weiß / White #000000 / #ffffff 21:1
Text Weiß / White - Schwarz / Black #ffffff / #000000 21:1
Text Weiß / White - Schwarz / Black (black-minus-one) #ffffff / #111111 18.88:1
Text Weiß / White - Schwarz / Black (black-minus-two) #ffffff / #282828 14.74:1
Text Weiß / White - Dunkel-Blau / darl-blue #ffffff / #003366 12.61:1
Text Grau - Weiß / White #000000 / #333 12.63:1
Text Schwarz / Black (black-minus-two) - Weiß / White — Standard Text #000000 / #282828 14.74:1
Text Schwarz / Black (black-minus-one) - Weiß / White #000000 / #111111 18.88:1
Ausnahmen (Aufgrund CI-Farbe)
Text UniBw Orange - Weiß / White #000000 / #ed6600 3.23:1 (Nur für Überschriften / Großschriften)
Text UniBw Orange - Schwarz / Black #000000 / #ed6600 6.5:1
Text UniBw Orange - Schwarz / Black (black-minus-one) #111111 / #ed6600 5.85:1
Text UniBw Orange - Schwarz / Black (black-minus-TWO) #282828 / #ed6600 4.56:1

Nicht funktionierende Textfarben auf Hintergrund

Wenn die Grundfarben geliebig kombiniert werden, kann es zu Farbkombinationen kommen, die nicht mehr Kontrastreich genug sind um sinnvoll Wahrgenommen zu werden. Diese Farben die weniger als 4.5:1 Kontrastverhältnis haben, sollten niemals zusammen eingesetzt werden.

Farbe-Kombination Namen Farbcode Kontrast
Text Grau - Weiß / White #000000 / #888 3.54:1

Gefundene Farben

Neben den offiziellen Farben sind beim Testen der Seite weitere Farben gefunden worden, diese sollten wenn notwendig in den offiziellen Farbkanon überführt werden und entsprechend auf das Kontrastverhältnis geprüft werden, oder durch offizielle Farben ersetzt werden. Wichtig, es sollten nicht zu viele unterschiedliche Farben existieren. Diese Farben können aber trotzdem sinn machen, wenn sie als Sonderformen z.B. für :hover Effekte genutzt werden.

Farbe Name Farbcode
  Offizielles Blau #003366
  Blau #002E5B
  Blau #002e56
  Dark-Blue #001428
  UniBw Organge #ED6600
  UniBw Organge Abgedunkelt #ba5000
  Grau #fafafa
  Grau #eee
  Grau #E6E6E6
  Grau #a9a9a9
  Grau #b3b3b3
  Grau #8B8891
  Grau #888
  Grau #6A686F
  Grau #666
  Grau #333
  Grau #282828
  Grau #000f1e