Farbe

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Farbe

Unsere Markenfarben

Ob in der Kommunikation oder auf unseren Produkten: Rot und Weiß sind unsere ikonischen Markenfarben, die Menschen auf Anhieb mit der Deutschen Bahn assoziieren. Deshalb verwenden wir sie in allen primären Kommunikationskanälen, um die Wiedererkennbarkeit und Konsistenz der Marke sicherzustellen. 

-

Farbsystem CMYK
-
Farbsystem HEX
-
Farbsystem SCSS
-
Farbsystem NCS
-
Farbsystem RAL
-
Farbsystem RGB
-
Farbsystem Pantone
-
DB Rot – Red 500

-

Farbsystem CMYK
-
Farbsystem HEX
-
Farbsystem SCSS
-
Farbsystem NCS
-
Farbsystem RAL
-
Farbsystem RGB
-
Farbsystem Pantone
-
Weiß

Einsatz und Anwendung

Für den Einsatz von unseren Markenfarben gilt eine einfache Regel: Rot setzen wir in der Kommunikation immer ein – denn so erkennen unsere Kund:innen die Deutsche Bahn sofort als Absenderin. Ob im Logo, ganz dezent im Puls oder illustrativen Icon, als aktivierendes Störer-Element oder als plakative Fläche – Unser DB Rot sorgt für direkte Identifizierung und bildet in Kombination mit Weiß die zentralen Farben unserer Marke.Bitte beachte: Unsere Richtlinien für den Umgang mit Farben in digitalen Produkten findest du hier:

Farben im UX

Beispielbild für eine Ein Out of Home Werbung
Beispielbild für eine Out of Home Werbung an einer Haltestelle
Beispielbild für eine Gestaltung einer Smartphone App
Beispielbild für eine 18/1er Out of Home Werbung

Das Wichtigste in Kürze

  1. Rot und Weiß sind unsere Markenfarben und sorgen für Wiedererkennbarkeit.
  2. DB Rot ist immer Teil der Gestaltung.
  3. Sekundärfarben setzen wir in besonderen Fällen ein, um inhaltliche Aussagen zu unterstreichen.

  • Beispiel für flexible Einsatzmöglichkeiten zum Einsatz der Markenfarbe DB Rot im Layout
  • Beispiel für flexible Einsatzmöglichkeiten zum Einsatz der Markenfarbe DB Rot im Layout
  • Beispiel für flexible Einsatzmöglichkeiten zum Einsatz der Markenfarbe DB Rot im Layout
  • Beispiel für flexible Einsatzmöglichkeiten zum Einsatz der Markenfarbe DB Rot im Layout
  • Beispiel für flexible Einsatzmöglichkeiten zum Einsatz der Markenfarbe DB Rot im Layout
  •   von 5
    Ende des Sliders

    Einsatz unserer Markenfarben

    Unsere Beispiele zeigen dir, welche flexiblen Einsatzmöglichkeiten du hast unsere ikonische Markenfarbe DB Rot im Layout einzusetzen. Damit die DB immer als Absenderin erkennbar bleibt.

    Sekundärfarben

    Unsere Sekundärfarbpalette besteht aus insgesamt 12 Farben. Jede der 12 Farben wurde in jeweils 8 Farbfelder unterteilt, die von hell bis dunkel (100-800) reichen. Die Vielzahl an Schattierungen lässt zu, beispielsweise die Anforderungen im digitalen Raum optimal abzudecken, oder auch Illustrationen möglichst authentisch zu colorieren.

    Zusätzlich gibt es themenspezifische Kommuniukationsmuster, bei denen der Einsatz von Sekundärfarben klar definiert- und in einem eigenen Kapitel dokumentiert ist. Stelle sicher, dass du die jeweiligen Vorgaben für den Farbeinsatz immer beachtest. Eine Übersicht unserer Kommunikationsmuster findest du hier.

    Illustration die den Aufbau der Sekundärfarben basierend auf 12 Grundfarben mit je 8 Schattierungen verdeutlicht.

    > Download Sekundärfarben

    > Sekundärfarben Anzeigen

    Gestaltungsprinzipien Sekundärfarben

    Rot und Weiß prägen das Erscheinungsbild unserer Marke und stellen eine schnelle Wiedererkennbarkeit sicher. Durch unsere Sekundärfarben, (die nur in besonderen Fällen zum Einsatz kommen) unterstützen wir inhaltliche Aussagen visuell. Unsere Kommunikation wird durch sie farbiger, aber nie bunt.Damit wir die Wiedererkennbarkeit auch beim Einsatz der Sekundärfarben gewährleisten können, gelten folgende Gestaltungsprinzipien für den Umgang mit Sekundärfarben:

     

    DB Rot ist immer Teil der GestaltungAber es gilt: Lesbarkeit geht vor! Sollte unser DB Rot (z.B. im Logo oder Puls) auf einer farbigen Hintergrundfläche nicht mehr erkennbar sein, dann wähle eine andere Farbkombination.

    Frame 1321317837

    Sicherstellung ausreichender KontrastverhältnisseStelle bei der Platzierung von Text immer ein ausreichend großes Kontrastverhältnis sicher. Für Large Text gilt ein Verhältnis von 3:1, für Small Text 4,5:1. Mehr dazu hier.

    Frame 1321317837 (1)

    Monochrome FarbkombinationenSolltest du einen zweiten Farbton benötigen, dann empfehlen wir dir Farbabstufungen der gleichen Farbe zu kombinieren. Für ein stimmiges Gesamtbild sollte das Kontrastverhältnis bei ca. 1,3:1 liegen.

    Frame 1321317837 (2)

    Ausgeglichene FarbstimmungenBei der Verwendung von mehr als zwei Sekundärfarben (z.B. für Illustrationen oder Infografiken), solltest du auf ein harmonisches Gesamtbild und die jeweiligen Kontrastanforderungen achten.

    Frame 1321317837 (3)

    Construction_Sign (1) 1

    Hier entsteht gerade ein neuer Kontrastrechner für dich.Damit du noch schon bald ganz automatisiert Farbkombinationen für deine Inhalte generieren kannst. Bis dahin kannst du diesen Online-Kontrastrechner nutzen.

    Einsatz und Anwendung

    Unsere Sekundärfarben kommen vor allem in unseren themenspezifischen Kommunikationsmustern vor. Diese ermöglichen es, zielgruppen- und kontextbezogene Anforderungen aufzugreifen und Themen, die markenstrategisch besonders relevant sind visuell zu verstärken. Für alle Kommunikationsmuster gelten in Bezug auf die Barrierefreiheit unsere generellen Richtlinien.

      

    Das Wichtigste in Kürze

    1. Unsere Sekundärfarben nutzen wir nur in besonderen Fällen, um eine inhaltliche Aussage mit entsprechender Farbe zu verstärken oder in unseren fest definierten Kommunikationsmustern.
    2. Achte immer auf die definierten Richtlinien zur Farbauswahl und Kontrastverhältnissen.
    3. Verläufe nutzen wir nur bei der Colorierung von Illustrationen.

    Do's and Dont's

    Unsere Markenfarbe DB Rot ist immer Teil der Gestaltung.

    Beispielbild mit DB Rot

    Unsere Markenfarbe DB Rot darf nicht fehlen.

    Negativbeispiel mit fehlender Markenfarbe DB Rot

    Die Farbe unserer Schrift ist Schwarz oder Weiß.

    Beispielbild mit schwarzer Schriftfarbe

    Die Farbe unserer Schrift ist nicht andersfarbig bzw. bunt.

    Negativbeispiel mit Schrift in Sekundärfarbe

    Logo und Puls sind entweder Rot oder Weiß.

    Beispielbild mit rotem Logo und Puls

    Wir verwenden keine Sekundärfarben im Logo und Puls.

    Negativbeispiel mit Puls und Logo in Sekundärfarbe

    Einsatz von Sekundärfarbe mit klaren Bezug zum Inhalt.

    Beispielbild mit Einsatz von Sekundärfarbe mit klaren Bezug zum Inhalt.

    Keinen Einsatz einer Sekundärfarbe ohne Bezug zum Inhalt.

    Negativbeispiel Einsatz einer Sekundärfarbe ohne Bezug zum Inhalt

    Unsere Markenfarben und ggf. Sekundärfarben werden nur nach Vorgaben verwenden.

    Beispielbild mit Marken- und Sekundärfarben

    Farbverläufe verwenden wir in der Gestaltung nie.

    Negativbeispiel mit Farbverlauf

    Downloads

    Darkmode

    Wir gestalten digitale Anwendungen der Deutschen Bahn so, dass sie einen Dark Mode unterstützen, sofern das systemseitig möglich ist. Damit ermöglichen wir eine moderne, nutzerfreundliche und inklusivere User Experience. Auch wenn es keine klare wissenschaftliche Evidenz gibt, kann der Dark Mode ein angenehmeres Lesen bei schlechten Lichtverhältnissen ermöglichen, die Augen schonen und die Energieeffizienz auf OLED-Displays verbessern. Die persönliche Präferenz spielt hier ebenfalls eine Rolle.Dabei unterscheiden wir zwischen dem Dark Mode, dem optionalen, systemweiten dunklen Erscheinungsbild und dem Dark Theme, welches als gestalterisches Element für verschiedene Produkte genutzt wird und auch in analogen Medien Anwendung finden kann. Die in diesem Guide beschriebenen Regeln, einschließlich der Anpassung der Markenfarbe Rot, beziehen sich speziell auf den Dark Mode und sind nicht unmittelbar auf ein Dark Theme übertragbar.Dieser Guide bietet Designer:innen, Entwickler:innen und Interessierten Orientierung bei der Gestaltung des Dark Modes. Durch klare Prinzipien und Best Practices sichern wir die Markenidentität, Barrierefreiheit und Ästhetik in digitalen Produkten der Deutschen Bahn.

    Warum Darkmode?

    Der Dark Mode hat sich von einem Design-Trend zu einem wichtigen Bestandteil moderner Nutzererlebnisse entwickelt. Er bietet viele Vorteile: Er schont die Augen bei schlechten Lichtverhältnissen und verbessert die Lesbarkeit. Zudem trägt er zur Barrierefreiheit bei, indem er die Zugänglichkeit für Personen mit Sehbehinderungen und visuellen Einschränkungen erhöht.

    Warum Darkmode?

    Der Dark Mode hat sich von einem Design-Trend zu einem wichtigen Bestandteil moderner Nutzererlebnisse entwickelt. Er bietet viele Vorteile: Er schont die Augen bei schlechten Lichtverhältnissen und verbessert die Lesbarkeit. Zudem trägt er zur Barrierefreiheit bei, indem er die Zugänglichkeit für Personen mit Sehbehinderungen und visuellen Einschränkungen erhöht.

    Prinzipien

    Für die Deutsche Bahn bedeutet der Dark Mode, dass der Weißanteil als besonderes Designmerkmal der Marke verloren geht und stattdessen durch das DB Cool Grey 800 / Background Level 1 (Design System) ersetzt wird. Dadurch ist es notwendig, die Farben anzupassen. Im Design System geschieht dies automatisch bei Verwendung der Token. Diese Veränderungen ergeben sich aus dem jeweiligen kommunikativen Ziel, sei es die markenprägende Wirkung oder die Kommunikation kritischer Informationen.

    Illustratives ICE Icon anhand dessen Eindruck beibehalten erklärt wird.

    Eindruck beibehaltenIn den Anwendungen bleibt der Look & Feel bestehen, um den Ausdruck der Marke beizubehalten und erlernte Strukturen zu unterstützen.

    Beispiel für den Einsatz reduzierter Farbakzente

    Farbe reduzierenDamit der Dark Mode bestmöglich wirken kann, sollten Farbakzente reduziert und gezielt eingesetzt werden.

    Illustratives Icon

    Hierarchie gewährleistenBestehende visuelle Hierarchien werden beibehalten und sind daher mit dem Light Mode vergleichbar.

    Illustratives Icon

    Barrierefreiheit erfüllenDer Dark Mode muss denselben Anforderungen der Barrierefreiheit wie im Light Mode entsprechen.

    Farbe

    Im Dark Mode passen wir die Farben gezielt an, um der stärkeren Wirkung durch höheren Kontrast und Überstrahlen entgegenzuwirken. Die Farben müssen gegenüber dem Light Mode etwas heller und weniger gesättigt dargestellt werden, um ein harmonisches Erscheinungsbild zu ermöglichen. Die Anpassung erfolgt systematisch innerhalb der bestehenden Farbpalette, wodurch sichergestellt wird, dass die Farben ihre gewünschte Wirkung behalten und die visuelle Kohärenz bestehen bleibt, ohne neue Farben hinzuzufügen.

    Die Markenfarbe Rot

    Die Farbe Rot ist das zentrale Element der visuellen Identität der Deutschen Bahn und steht für Wiedererkennung, Vertrauen und Klarheit. Diese Werte müssen auch im Dark Mode erkennbar bleiben. Jedoch ist die Wirkung der Markenfarbe Rot im Dark Mode nicht gleich wie im Light Mode. Dunkle Hintergründe lassen Rot oft intensiver oder strahlender wirken, was die Balance zwischen Strahlkraft und Erkennbarkeit beeinflussen kann. Um sicherzustellen, dass die Markenidentität erhalten bleibt und gleichzeitig eine gute Lesbarkeit gewährleistet wird, müssen klare Regeln für den Einsatz von Rot im Dark Mode formuliert werden.

    Unterscheidung zwischen Marke und Information

    Beispiel für Primary Button in DB Rot

    Das DB Rot wird gezielt für Markenprägende Elemente eingesetzt z.B. Brand Buttons eingesetzt. Im Gegensatz zu informativen Inhalte wird auch im Dark Mode der Marken-Rotton beibehalten.

    Beispiel für Interface-Elemente

    Für Informativen Inhalte und Interface-Elemente wie z.B. Verspätungen oder Fehlermeldungen verwenden wir die Farblogik des DB UX Design Systems.

      

    Barrierefreiheit

    Das angepasste DB Rot für den Dark Mode ist speziell auf dunkle Hintergründe abgestimmt und erfüllt daher die Anforderungen an die Barrierefreiheit. Auf hellen Hintergründen hingegen wird nach wie vor das ursprüngliche DB Rot verwendet, um in diesem Kontext die beste Wirkung und Barrierefreiheit zu gewährleisten.Zusätzlich gilt: Auf dem Dark Mode Rot dürfen in Weiß nur noch große Textelemente oder Grafiken stehen, da kleinere Schriften oder feine Details nicht uneingeschränkt erkennbar sind.

    Systematische Farbanpassung

    Im Dark Mode werden bunte Farben in ihrer Palette symmetrisch „gespiegelt“. Das bedeutet, dass zum Beispiel Blue 700 im Light Mode im Dark Mode durch Blue 200 ersetzt wird. Im Design System passiert diese Spiegelung automatisch bei Verwendung der Farbtoken. Auf diese Weise bleiben die Helligkeitsabstufungen der Farben konsistent, auch wenn das Erscheinungsbild dunkel wird.Hinweis: Dieses System bietet einen Startpunkt für die Übersetzung der Farben in den Dark Mode. Zusätzlich muss aber geprüft werden, ob die Kontrastverhältnisse im Sinne der Barrierefreiheit ausreichend sind. Dabei unterscheiden wir zwischen informativen und dekorativen Inhalten. Relevante Informationen müssen ein Kontrastverhältnis gemäß WCAG Konformitätsstufe AA erfüllen.

    Symbolbild zur Spiegelung der bunten Farben

    Hintergründe und Oberflächen

    um Hintergründe im Dark Mode klar und harmonisch zu strukturieren, wird die Grau-Palette gegenüber dem Light Mode in umgekehrter Form verwendet. Der Farbton, DB Cool Gray 800 / Background Level 1 (Design System), bildet die Basis für Hauptflächen und Seitenhintergründe. Hellere Abstufungen ermöglichen visuelle Abgrenzungen und erzeugen Tiefe, indem sie verschiedene Ebenen voneinander unterscheiden. Dieses stufenweise Aufhellen schafft eine klare Hierarchie und Lesbarkeit, ohne der ruhigen Ästhetik des Dark Modes entgegenzustehen.Die Grautöne werden für den Dark Mode systematisch gespiegelt. Dabei wird zum Beispiel der weiße Hintergrund des Light Modes zu Gray 800, während Gray 100 im Dark Mode zu Gray 700 wird. Im Design System passiert diese Spiegelung automatisch bei Verwendung der Farbtoken. Dieses Prinzip sorgt für Konsistenz und stellt sicher, dass die bestehende Farbabstufung erhalten bleibt, ohne neue Farben hinzuzufügen.Hinweis: Dieses System funktioniert weitgehend ohne nachträgliche Überprüfung von Kontrasten. Im Zweifelsfall und im Zusammenhang mit Farbe empfehlen wir dennoch, Kontraste zu prüfen, um die barrierefreie Darstellung (gem. WCAG AA) der Inhalte sicherzustellen.

    Symbolbild zur Spiegelung der Grau-Palette

    Illustratives Beispiel, das zeigt, dass eine 1:1-Spiegelung von Vorder- und Hintergrundfarben im Normalfall funktioniert.

    Das obige Beispiel zeigt, dass eine 1:1-Spiegelung von Vorder- und Hintergrundfarben im Normalfall funktioniert: Helle Hintergründe im Light Mode werden im Dark Mode zu dunklen Flächen, während dunkler Text zu hellem Text wird. Dieses Prinzip gewährleistet ein konsistentes und barrierefreies Erscheinungsbild.

     

    Beispielbild zum Umgang mit dunklen Flächen, die im Darkmode nicht farblich gespiegelt werden können.

    Das Prinzip der 1:1-Spiegelung von Farben lässt sich nicht in allen Fällen sinnvoll anwenden. Im Light Mode werden bestimmte Elemente gezielt durch flächig dunkle Farben hervorgehoben. Würde man diese Farben im Dark Mode einfach umkehren, entstünde eine helle Fläche, die zwar auffällt, aber das harmonische Gesamtbild stören würde.In solchen Fällen sollte die Farbe des Elements nicht gespiegelt, sondern dunkel belassen werden. Um die gewünschte Hervorhebung dennoch zu erzielen, empfiehlt es sich, auf andere Arten der Auszeichnung zurückzugreifen – beispielsweise durch subtile Konturen oder eine Anpassung der Helligkeit des umgebenden Hintergrunds. So bleibt die visuelle Hierarchie erhalten, ohne die Ästhetik des Dark Modes zu beeinträchtigen. Da diese Hervorhebungen nicht die Regel sind, muss teilweise im Einzelfall abgewägt werden, wie ein geeigneter Übertrag in den Dark Mode aussehen kann.

    Typografie

    Im Dark Mode wird dunkler Text aus dem Light Mode zu heller Schrift, um den Kontrast auf dunklen Hintergründen zu gewährleisten. Schwarzer Text wird zu Weiß und die Grautöne der Typografie werden symmetrisch gespiegelt. Das Prinzip ist umgekehrt zu dem für die Hintergrundfarben. Allerdings wird bei der Typografie nicht die gesamte Grau-Palette verwendet, um ein ausreichendes Kontrastverhältnis auf entsprechenden Hintergründen sicherzustellen. Mittelgrautöne sind ohnehin sowohl auf hellen wie auch dunklen Hintergründen zu kontrastarm.

    Veranschaulichung der Spiegelung von Grau-Tönen

    Auf dunklen Hintergründen wirkt weißer Text optisch fetter als dunkler Text auf hellen Flächen. Um diese Wirkung auszugleichen, werden die Schriftstärken der Überschriften im Dark Mode angepasst. Während Light-Schnitte unverändert bleiben, wird der Black-Schnitt über die variable DB-Schrift um -100 im Font Weight reduziert, um eine ausgewogene und angenehme Lesbarkeit zu gewährleisten sowie ein “Zulaufen” auf dunklen Hintergründen zu vermeiden. Zudem behält die Überschrift dadurch dasselbe optische Gewicht wie im Light Mode.

    Vergleich von Überschriften im Light- und Darkmode

    Ausblick: Illustrationen

    Auch Illustrationen werden zukünftig an den Dark Mode angepasst, um harmonisch in das Gesamtdesign zu passen. Aktuell befindet sich dieser Bereich noch in der Ausarbeitung. Sobald die Anpassungen abgeschlossen sind, werden entsprechende Richtlinien ergänzt, um eine konsistente Gestaltung sicherzustellen.

    Vergleich von Illustrationen im Light- und Darkmode

    Do´s & Dont`s

    Der folgende Abschnitt veranschaulicht, welche Gestaltungsansätze im Dark Mode empfohlen werden und welche vermieden werden sollten.

    Farben spiegeln, aber immer das Gesamtbild im Blick behalten

    Schmuckbild

    Die Farben aus dem Light Mode werden so gespiegelt, dass sie im Dark Mode ein harmonisches Gesamtbild ergeben und das Design ausgewogen bleibt.

    Schmuckbild

    Spiegele Farben nicht 1:1, wenn dies unharmonische oder störende Flächen erzeugt, die das Design beeinträchtigen und entgegen der Grundsätze des Dark Modes stehen.

    Kontraste im Dark Mode nachträglich prüfen und bei Bedarf anpassen

    Schmuckbild Kontrastprüfung

    Nach der Farbanpassung werden Kontraste geprüft und angepasst, um Lesbarkeit und klare visuelle Hierarchien zu gewährleisten.

    Negativbeispiel Darkmode Kontrast

    Belasse Farben nicht unverändert, wenn der Kontrast im Dark Mode nicht ausreicht und die Lesbarkeit leidet.

    Dark Mode Red nur für Markenelemente und Primary Buttons nutzen

    Beispielbild für den Einsatz von DB Rot im Darkmode

    Das Dark Mode Rot wird gezielt für Markenelemente und Primary Buttons eingesetzt, um markenprägende Wirkung auch im Dark Mode zu erreichen.

    Negativbeispiel für den Einsatz von DB Rot im Darkmode

    Verwende das Dark Mode Rot nicht für allgemeine Inhalte und Interface-Elemente, sondern nur für markenprägende Assets, wie Logo, illustrative Icons und Primary Buttons.

    Barrierefreiheit

    Farbe ist nicht nur ein essenzieller Bestandteil unserer Markenidentität, sie spielt gleichzeitig eine bedeutende Rolle in Sachen Lesbarkeit und Barrierefreiheit. Wir möchten sicherstellen, dass jeder Mensch, unabhängig von seinen individuellen Fähigkeiten und Einschränkungen unsere Kommunikation und Informationen verstehen kann.

    Damit unserer Inhalte, Produkte, Services und Informationen bestmöglich zugänglich sind und dabei immer im Stil der modernen Ikone bleiben, beachtet bitte folgende Richtlinien zu Kontrastverhältnissen und ihrer Anwendung. Für unsere digitalen Produkte gelten spezifische Richtlinien zur Barrierefreiheit innerhalb des Designsystems. Weitere Informationen dazu findest du hier:

    > Farbe im UX

    Kontrastverhältnisse

    Der Kontrast ist der Helligkeitsunterschied zwischen zwei Elementen. Um die bestmögliche Wahrnehmbarkeit und Benutzerfreundlichkeit unserer Inhalte zu gewährleisten, folgen wir bei der Deutschen Bahn den Web Content Accessibility Guidelines (WCAG). In den WCAG sind Standards zur Gewährleistung von Barrierefreiheit definiert:

    • Large Text erfordert ein Kontrastverhältnis von 3:1. Als Large Text gilt jede Größe ≥18 Pt wenn Regular und ≥14 Pt wenn Bold.
    • Small Text erfordert ein Kontrastverhältnis von 4,5:1. Als Small Text gilt jede Größe <18 Pt wenn Regular und <14 Pt wenn Bold.
    • Grafische Elemente wie z.B. unser Logo erfordern ebenfalls ein Kontrastverhältnis von 3:1.
    • Rein dekorative Elemente, die keinerlei Information enthalten, müssen kein bestimmtes Kontrastverhältnis erfüllen.

    Unsere Markenfarben sowie Sekundärfarben sind bei korrekter Anwendung immer barrierefrei. Das bedeutet konkret: Auf weißen Hintergründen setzen wir unser Logo und Puls in Rot ein; unsere Schrift ist dabei Schwarz (Print) bzw. Cool Gray 700 (digital). Auf roten Hintergründen setzen wir sowohl Logo, Puls als auch Schrift in Weiß ein.

    Beispielbild für korrekten Einsatz der Farbe bei Logo, Puls und Schrift

    Auf weißen Hintergründen nutzen wir unser rotes Logo und Puls. Unsere Schriftfarbe ist Schwarz (im Print) bzw. Cool Gray 700 (digital).

    Beispiel für korrekten Einsatz der Farbe für Logo, Puls und Schrift aus rotem Hintergrund

    Auf roten Hintergründen nutzen wir unser weißes Logo und Puls. Unsere Schriftfarbe ist ebenfalls weiß.

    Gegenüberstellung von Positiv- und Negativbeispiel bezüglich des Kontrastes

    Large Text erfordert ein Kontrastverhältnis von mindestens 3:1. Als Large Text gilt jede Größe über 18 Pt, wenn Regular, und über 14 Pt, wenn Bold.

    Gegenüberstellung von Positiv- und Negativbeispiel bezüglich des Kontrastes

    Small Text erfordert ein Kontrastverhältnis von mindestens 4,5:1. Als Small Text gilt jede Größe unter 18 Pt, wenn Regular,und unter 14 Pt, wenn Bold.

    Gegenüberstellung von Positiv- und Negativbeispiel bezüglich des Kontrastverhältnisses grafischer Elemente, hier unser Logo.

    Grafische Elemente mit Informationsgehalt erfordern ein Kontrastverhältnis von mindestens 3:1. Wie z.B. unser Logo.

    Beispiele für das Kontrastverhältnis rein dekorativer grafischer Elemente

    Für rein dekorative grafische Elemente verwenden wir ein Kontrastverhältnis von 1,3:1. Beachte im Zusammenspiel mit Text, dass die hellere Farbe das Kontrastverhältnis für Text gewährleisten muss.

    Farbenfehlsichtigkeit

    Menschen mit einer Farbenfehlsichtigkeit haben Probleme, Farben richtig zu erkennen oder Nuancen einer Farbe zu unterscheiden. Unser Design unterstützt Personen mit Farbenfehlsichtigkeit. Deshalb achten wir bei der Gestaltung darauf, Farbe nie als einziges Mittel zur Kommunikation relevanter Inhalte einzusetzen (Prinzip des Dual Coding).

    Die Abbildung zeigt, wie verschiedene Farben für Personen mit unterschiedlichen Formen von Farbenblindheit im Vergleich zum normalen Sehen aussehen kann.

    Normal

    Ansicht der Farben für normalsichtige Personen

    Rot-Grün-Blindheit

    Ansicht der Farben für Personen mit Rot-Grün-Blindheit

    Blau-Blindheit

    Ansicht der Farben für Personen mit Blau-Blindheit

    Vollständige Farbenblindheit

    Ansicht der Farben für Personen mit vollständiger Farbenblindheit

    Das Wichtigste in Kürze

    1. Für Headlines und informative grafische Elemente gilt ein Kontrastverhältnis von 3:1.
    2. Für Texte gilt ein Kontrastverhältnis von 4,5:1.
    3. Rein dekorative Elemente sollten ein Kontrastverhältnis von 1,3:1 haben und harmonisch im farblichen Gesamtbild wirken.

    Mehr zu unseren Farben