Diagramme dienen der grafischen Darstellung von Daten, Sachverhalten oder Informationen. Je nach Zielsetzung werden höchst unterschiedliche Typen eingesetzt.
Ein Diagramm kann einen komplexen Zusammenhang verdeutlichen und ist zudem oft codiert, das heißt, dass man z.B. mit einer dazugehörenden Legende arbeiten muss. Dadurch fällt der Einsatz von Farbe hier stark ins Gewicht: Die Farben in der Legende müssen sich den Daten im Diagramm einfach zuordnen lassen.
Für Diagramme gelten die sogenannten kategorischen Farben.
Die kategorischen Farben der R+V sind mathematisch errechnet und systemisch gedacht. So können auch die Diagramme in verschiedene Modi überführt werden, ohne den Rahmen der Vorgaben zu verlassen. Sie erfüllen die erforderlichen Kontraste und unterscheiden sich ausreichend zu- und untereinander.
Es gibt sie pauschal für „light modes“ und „dark-modes“, also für helle und dunkle Hintergründe.
Kategorische Farben für helle Hintergründe (Weiß, Sand, Grün und Grau 1)
SVG Format für verlustfreies Skalieren (Vergrößern)
Grundsätzlich bietet sich das SVG-Format für den Aufbau komplexer Grafiken an, da es, auf Vektorebene, verlustfrei skalierbar ist. Nutzer haben dann die Möglichkeit sich eine Grafik beliebig groß anzeigen zu lassen, eine Grundvoraussetzung für eine optimale Wahrnehmung und Bedienbarkeit.
Alternativtext
Diagramme sind zwingend mit einem alternativen Text zu beschreiben und so akustisch zugänglich zu machen.
1. Instanz (Diagramm-Inhalt 1 bis 6): Farbige Flächen
1. Instanz (Diagramm-Inhalt 1 bis 6): Farbige Flächen
Für alle Diagrammarten werden die kategorischen Farben in der festgelegten Reihenfolge von 1 bis 6 angewendet. Diagramme sind aus sind möglichst einfachen, farbigen Flächen aufgebaut. Komplexität ist nicht nur in der Art der Darstellung zu vermeiden, sondern auch in der Anzahl an Diagrammdaten insgesamt.
Farbeinsatz für Diagrammdaten 1 bis 6 in der vorgegeben Reihenfolge. Beispielhaft auf Weiß (analog Sand, Grün und Grau 1).
Farbeinsatz für Diagrammdaten 1 bis 6 in der vorgegeben Reihenfolge. Beispielhaft auf R+V Dunkelblau.
Die allgemeinen R+V-Farben dürfen nicht zur farblichen Ausgestaltung eines Diagramms genutzt werden! Sie dienen nur als markenprägende Farbe im Hintergrund und für Texte.
Anwendungsbeispiele
Anwendung von 3 kategorischen Farben in einem Balkendiagramm
Anwendung von 4 kategorischen Farben in einem Kreisdiagramm
Anwendung von 5 kategorischen Farben in einer Pyramide
Anwendung von sechs kategorischen Farben in einem Säulendiagramm
Hintergrundfarben
Die Hintergrundfarben Sand, Grün und Grau 1 funktionieren in Bezug auf die Kontraste ebenso wie Weiß:
Textfarben
Alle Textbestandteile innerhalb eines Diagramms müssen zwingend einen Kontrast von mindestens 4,5 zu 1 haben.
Auf dunkelblauem Hintergrund und dunklen Grafikflächen wird weiße Schrift verwendet.
Auf hellem Hintergrund und hellen Grafikflächen wird dunkelblaue Schrift verwendet.
Um die Kontrastwirkung zu verstärken, sollten
Bold oder Black als Schriftschnitt verwendet werden.
die Punkt- bzw. Pixelgröße gemäß den Vorgaben der WCAG für Texte zum Einsatz kommen.
Beachten Sie dafür die Mindestgrößen für Texte
Orange wird nur sehr reduziert eingesetzt, da es die Kontrastanforderungen nur eingeschränkt erfüllen kann. Es funktioniert:
als Highlight in Headlines,
im Schriftschnitt Bold,
und bei einer Schrift größer als 19 px.
Trennung zwischen einzelnen Farbflächen
Bei klassischen Diagrammen sollte gleich nach der richtigen Farbwahl auf den Aufbau der Form geachtet werden. Es hilft, wenn zwischen einzelnen Diagramm-Elementen ausreichend große Abstände für eine natürliche Trennung sorgen:
Die einzelnen Flächen einer Grafik sind räumlich voneinander getrennt und heben sich so bestmöglich voneinander ab.
Diagramme mit Linien
Der Einsatz von Liniendiagrammen, die barrierefrei abgebildet werden müssen, ist grundsätzlich zu hinterfragen! Der Verzicht auf die Darstellung, eine andere Art der Darstellung oder die Beschreibung als Text sind der Abbildung eines Liniendiagramms vorzuziehen.
Bestehen Diagramme aber doch nur aus Linien, müssen zusätzlich Symbole zur Unterscheidbarkeit verwendet werden. Linien alleine sind zu wenig flächig, damit die Farbe ausreicht, um eine gute Unterscheidbarkeit zu erzeugen.
Liniendiagramme mit mehr als 6 Linien sind nahezu nicht mehr barrierefrei zu gestalten. Durch Überschneidungen der Linien untereinander ist es schlicht nicht möglich eine ausreichend gute Unterscheidbarkeit zu erzeugen.
Linienfarben werden durch zusätzliche Symbole besser voneinander unterscheidbar gemacht. Die Symbole selbst sind nicht festgelegt, müssen aber so einfach wie möglich aufgebaut sein.
Darstellung von Diagramm-Inhalten größer 6 Datenfelder
Darstellung von Diagramm-Inhalten größer 6 Datenfelder
Farbige Konturen
Je komplexer die Grafik oder das Diagramm, desto mehr Farben sind unter Umständen auch im Einsatz. Da sich die Farben ab der Anzahl > 6 wiederholen, wird also als erstes, weiteres Unterscheidungsmerkmal zur farbigen Fläche die farbige Kontur verwendet.
Es ist auf eine ausreichend dicke und gut erkennbare Kontur (ca. 7 - 10 px) zu achten!
Um in den gleichen Größenverhältnissen der Grundflächen zu bleiben, bietet sich eine innenliegende Kontur am ehesten an.
Farbeinsatz für Diagrammdaten 1 bis 12 in der vorgegeben Reihenfolge. Beispielhaft auf R+V Dunkelblau.
Farbeinsatz für Diagrammdaten 1 bis 12 in der vorgegeben Reihenfolge. Beispielhaft auf Weiß (analog zu Sand, Grün und Grau 1).
Hinweis: Konturen werden nicht als Alternative zu Flächen genutzt, sondern nur um Diagrammdaten größer 6 Datenfeldern darzustellen.
Anwendung von 7 Farben
Anwendung von 8 Farben
Anwendung von 9 Farben
Anwendung von 10 Farben
Farbige Flächen schraffiert
Erfordern komplexe Diagramme die Darstellung von mehr als 12 Datenfeldern, kommen in dritter Instanz Texturen zur Abgrenzung einzelner Farbflächen zum Einsatz. Eine möglichst einfache Textur passt zur Plakativität des Designsystems: die Schraffur.
Farbeinsatz für Diagrammdaten 1 bis 18 in der vorgegeben Reihenfolge. Beispielhaft auf R+V Dunkelblau.
Farbeinsatz für Diagrammdaten 1 bis 18 in der vorgegeben Reihenfolge. Beispielhaft auf R+V Dunkelblau.
Die Schraffur selbst muss deutlich erkennbar sein. Je nach Flächengröße etwa 5 px für die Strichstärke - als erser Richtwert.
Zusätzlich soll eine dünne Außenkontur die Fläche noch besser vom Hintergrund absetzen. Diese ist mit ca 2 px deutlich dünner als die Strichstärke der Schraffur.
Don'ts
Bei Einsatz der Schraffur können Textelemente nicht mehr auf den Diagrammdaten direkt platzier werden.
