Farben
Hier setzen wir auf eine pointierte Reduktion: Farben werden nur dezent eingesetzt. Rot wird für die wichtigen Navigationselemente verwendet, die dem Benutzer eine schnelle und verständliche Leitung durch die Seite bietet. Verläufe sind nicht erlaubt.
Name: Red
HEX: #EB0000
RGB: R: 235 G: 0 B: 0
Name: Red125
HEX: #C60018
RGB: R: 198 G: 0 B: 24
Name: Red150
HEX: #A20013
RGB: R: 162 G: 0 B: 19
Name: White
HEX: #FFFFFF
RGB: R: 255 G: 255 B: 255
Name: Milk
HEX: #F6F6F6
RGB: R: 246 G: 246 B: 246
Name: Cloud
HEX: #E5E5E5
RGB: R: 229 G: 229 B: 229
Name: Silver
HEX: #DCDCDC
RGB: R: 220 G: 220 B: 220
Name: Aluminum
HEX: #D2D2D2
RGB: R: 210 G: 210 B: 210
Name: Platinum
HEX: #CDCDCD
RGB: R: 205 G: 205 B: 205
Name: Cement
HEX: #BDBDBD
RGB: R: 189 G: 189 B: 189
Name: Graphite
HEX: #B7B7B7
RGB: R: 183 G: 183 B: 183
Name: Storm
HEX: #A8A8A8
RGB: R: 168 G: 168 B: 168
Name: Smoke
HEX: #8D8D8D
RGB: R: 141 G: 141 B: 141
Name: Metal
HEX: #767676
RGB: R: 118 G: 118 B: 118
Name: Granite
HEX: #686868
RGB: R: 104 G: 104 B: 104
Name: Anthracite
HEX: #5A5A5A
RGB: R: 90 G: 90 B: 90
Name: Iron
HEX: #444444
RGB: R: 68 G: 68 B: 68
Name: Charcoal
HEX: #212121
RGB: R: 33 G: 33 B: 33
Name: Midnight
HEX: #151515
RGB: R: 21 G: 21 B: 21
Name: Black
HEX: #000000
RGB: R: 0 G: 0 B: 0
Name: Blue
HEX: #2d327d
RGB: R: 45 G: 50 B: 125
Farbverhältnisse
SBB Webseiten sind in den folgenden Farbverhältnissen zu gestalten. Die Quantitäten sind als Richtwerte zu verstehen – nicht als exakte Regel. Signifikante Abweichungen sind jedoch zu vermeiden. Wenn diese unumgänglich ist eine Prüfung durch die SBB Markenführung notwendig.
Erweiterte funktionale Farben
Zusatzfarben dürfen nur mit Einverständnis von KOM verwendet werden. Jeglicher Einsatz dieser Farben muss KOM vorgelegt und ausdrücklich genehmigt werden. Zusatzfarben dürfen nur für ganz bestimmte Bereiche zum Einsatzt kommen. Überall dort, wo die CD Farbpalette aus UX-Gründen nicht mehr ausreichend ist. Zum Beispiel für Infoboxen oder Ähnliches.
Name: Sky
HEX: #0079C7
RGB: R: 0 G: 121 B: 199
Name: Night
HEX: #143A85
RGB: R: 20 G: 58 B: 133
Name: Violet
HEX: #6F2282
RGB: R: 111 G: 34 B: 130
Name: Autumn
HEX: #E84E10
RGB: R: 232 G: 78 B: 16
Name: Orange
HEX: #F27E00
RGB: R: 242 G: 126 B: 0
Name: Peach
HEX: #FCBB00
RGB: R: 252 G: 187 B: 0
Name: Lemon
HEX: #FFDE15
RGB: R: 255 G: 222 B: 21
Name: Brown
HEX: #B76000
RGB: R: 183 G: 96 B: 0
Name: Green
HEX: #00973B
RGB: R: 0 G: 151 B: 59
Name: Turquoise
HEX: #00A59B
RGB: R: 0 G: 165 B: 155
Barrierefreie Darstellung
Bei der Kombination von Farben ist darauf zu achten, dass ein minimales Kontrastverhältnis von 4.5:1 eingehalten wird. Für grosse Schriften (ab 18pt) und Interface-Elemente (Eingabefelder, Radiobuttons, etc.) gilt ein minimales Verhältnis von 3:1. Dies entspricht den minimalen Vorgaben der WCAG 2.2 Level AA. Die Kontrastwerte können mit dem Colour Contrast Analyser oder dem folgenden Tool überprüft werden.