Inhaltsbereich Navigation Navigation Fußzeile

Farben

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

Umsetzende des Design Systems sind angehalten, die Variablennamen zu verwenden, die als Sass-Variablen zur Verfügung gestellt werden. Somit wird sichergestellt, dass immer nur die jeweils aktuell mit den Beteiligten abgestimmten Farben verwendet werden und Aktualisierungen in der gesamten Lieferkette automatisch durchgeführt werden können.

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)#6F7C89
60%iges DunkelblauDark Blue 60rgba(31, 51, 71, .32)#B6BCC3
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, .04)#F5F6F7
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
WeissWhite 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 BITV Prio. 1 bzw. 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 ihren 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 (BITV Prio. 2) 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.