Inhaltsbereich Navigation Navigation Fußzeile

Farben

Abstufungen in der Helligkeit der verwendeten Primär-Farben.

Durch die Verwendung der Sass-Variablen wird sichergestellt, dass immer nur die abgestimmten Farben verwendet werden und Aktualisierungen in der gesamten Lieferkette automatisch durchgeführt werden können.

Farbanpassungen in Version 11.10

Um ein konsistenteres und monochromeres Gesamtbild zu schaffen haben wir mit dieser Version nahezu alle Grautöne durch Blaugrautöne ersetzt. Sämtliche neutralen Farben basieren nun auf einem dunklen Blau und sorgen so für eine harmonischere visuelle Grundlage. Reines Schwarz sowie transparente Schwarzwerte setzen wir gezielt und ausschließlich zur Abdunklung bei Schatten, Hover-Zuständen oder Modal-Overlays ein.

Für tertiäre Inhalte und kleinere Texte (Microcopy) haben wir bisher Black-70 eingesetzt. Dark-Blue-70 erfüllt die gleichen Kontrastanforderungen, wirkt durch seinen kühleren Blauton jedoch harmonischer und fügt sich besser ins Gesamtbild ein.

Black - 70 #6C6C6C wird zu Dark Blue - 70 #596877

Für deaktivierte Elemente haben wir bisher Black-60 eingesetzt. Deaktivierte Elemente müssen keinen Mindestkontrast erfüllen. Dark-Blue-50 ist ein wenig heller und wirkt durch seinen kühleren Blauton harmonischer.

Black - 60 #B2B2B2 wird zu Dark Blue - 50 #C9CED3

Black-20 wurde als neutrale Hintergrundfarbe eingesetzt. Dark-Blue-20 wirkt durch seinen kühleren Blauton harmonischer.

Black - 20 #F5F5F5 wird zu Dark Blue - 20 #F6F7F8

Black-10 wurde als neutrale Hintergrundfarbe eingesetzt. Dark-Blue-10 wirkt durch seinen kühleren Blauton harmonischer.

Black - 10 #FCFCFC wird zu Dark Blue - 10 #FBFBFC

Farben, Bezeichnungen und Werte

BlautöneFarbnameRGBa-WertHex
100%iges BlauBlue 100rgba(45, 111, 158, 1)#2D6F9E
40%iges BlauBlue 40rgba(45, 111, 158, .16)#DCE7EF
30%iges BlauBlue 30rgba(45, 111, 158, .1)#E9F0F5
20%iges BlauBlue 20rgba(45, 111, 158, .05)#F5F8FA
10%iges BlauBlue 10rgba(45, 111, 158, .01)#FBFCFD
100%iges HellblauLight Blue – 100rgba(46, 174, 255, .08)#EDF8FF
40%iges HellblauLight Blue – 40rgba(46, 174, 255, .16)#DCF1FF
30%iges HellblauLight Blue – 30rgba(46, 174, 255, .08)#EDF8FF
100%iges DunkelblauDark Blue 100rgba(31, 51, 71, 1)#1F3347
70%iges DunkelblauDark Blue 70rgba(31, 51, 71, .64)#596877
60%iges DunkelblauDark Blue 60rgba(31, 51, 71, .32)#B6BCC3
50%iges DunkelblauDark Blue 50rgba(31, 51, 71, .24)#C8CDD2
40%iges DunkelblauDark Blue 40rgba(31, 51, 71, .16)#DADDE0
30%iges DunkelblauDark Blue 30rgba(31, 51, 71, .1)#ECEEEF
20%iges DunkelblauDark Blue 20rgba(31, 51, 71, .05)#F4F5F6
10%iges DunkelblauDark Blue 10rgba(31, 51, 71, .01)#FBFBFC
GrüntöneFarbnameRGBa-WertHex
100%iges GrünGreen 100rgba(0, 138, 39, 1)#008A27
20%iges GrünGreen 20rgba(0, 138, 39, .04)#F5FBF5
10%iges GrünGreen 10rgba(0, 138, 39, .01)#FCFEFC
GelbtöneFarbnameRGBa-WertHex
100%iges GelbYellow 100rgba(255, 152, 12, 1)#FF980C
60%iges GelbYellow 60rgba(255, 152, 12, .32)#FFDEB0
30%iges GelbYellow 30rgba(255, 152, 12, .08)#FFF7EB
20%iges GelbYellow 20rgba(255, 152, 12, .04)#FFFBF5
10%iges GelbYellow 10rgba(255, 152, 12, .01)#FFFEFC
RottöneFarbnameRGBa-WertHex
100%iges RotRed 100rgba(0, 138, 39, 1)#CD1408
20%iges RotRed 20rgba(0, 138, 39, .04)#FDF5F5
10%iges RotRed 10rgba(0, 138, 39, .01)#FFFCFC
GrautöneFarbnameRGBa-WertHex
100%iges SchwarzBlack 100rgba(0, 0, 0, 1)#000
70%iges SchwarzBlack 70rgba(0, 0, 0, .57)#6C6C6C
60%iges SchwarzBlack 60rgba(0, 0, 0, .3)#B2B2B2
10%iges SchwarzBlack 10rgba(0, 0, 0, .01)#FCFCFC
WeißWhite 100rgba(255, 255, 255, 1)#FFF
TransparentTransparentrgba(255, 255, 255, 0)n/a

Anforderungen an die Barrierefreiheit von Farbkombinationen

Wichtig aus Sicht der Barrierefreiheit ist das Kontrastverhältnis zweier angrenzender Farben zueinander: Die WCAG Level AA verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text bzw. 3:1 für großen Text. Ebenso gilt ein Kontrastverhältnis von mindestens 3:1 für UI-Elemente und ihre umgebenden Farben wie zum Beispiel bei Rahmen- oder Hintergrundfarben, sofern diese bedeutungstragend sind.

Auch in bedeutungstragenden Bildinhalten müssen Kombinationen von Vorder- und Hintergrundfarben die Vorgaben des Level AA der WCAG erfüllen. Text unmittelbar auf Fotos oder andere Halbtonbilder zu stellen ist nur dann zulässig, wenn die Einhaltung der Anforderungen bei wechselnden Hintergründen garantiert werden kann.

Farben zur Kennzeichnung von Zuständen und Hervorhebungen

Beachten Sie in der Gestaltung Ihrer Anwendung auch, dass Kontrastanforderungen nicht nur für Textinhalte und deren Hintergrundfarben gelten, sondern dass es auch Anforderungen wie 1.4.11 Nicht-Text-Kontrast gibt, die verschiedene Zustände von interaktiven Elementen deutlich unterscheidbar machen sollen.

Um die Stufe AAA der WCAG zu erreichen, hat der Fokus-Indikator ein Kontrastverhältnis von mindestens 4,5:1 zwischen den fokussierten und nicht-fokussierten Zuständen des Elementes. Bitte beachten Sie, dass es in den kommenden WCAG 2.2 zusätzliche Kontrastanforderungen für fokussierte Zustände geben wird, die bereits jetzt umgesetzt werden können.

Somit benötigen alle Elemente der Benutzerschnittstelle eigene Farbdefinitionen für ihre jeweiligen Zustände, die durchgängig eingehalten werden müssen. Die exakten Definitionen entnehmen Sie bitte den jeweiligen Komponenten und Mustern sowie deren Design Tokens.