Source: https://cd.union-investment.de/grundlagen/Grafikelemente/diagramme
[...]
Diagramme sind in ihrem Aufbau auf das Wesentliche reduziert. Sie zeichnen sich durch eine klare Formensprache aus geometrischen Grundformen aus. Die Markentypik entsteht vor allem durch den Einsatz der Primärfarben.
* Bitte beachten: : * Im Rahmen der Umsetzung der Barrierefreiheitsrichtlinien wurden kleine visuelle Veränderungen an den Diagrammen vorgenommen, die nun generell gelten. Zusätzlich wurden strukturelle Anpassungen integriert, die für barrierefreie Diagramme unerlässlich sind.
Anwendungsbeispiele
Allgemeiner Aufbau
Farbigkeit von Diagrammen
Gitternetzlinien
Kontraste und visuelle Trennung
Beschriftung und Legende
Grenzfälle und Lösungen
Barrierefreie Diagramme
Bitte vermeiden
### Allgemeiner Aufbau
Diagramme spielen eine zentrale Rolle in der klaren und schnellen Vermittlung von Informationen. Halten Sie Diagramme so einfach wie möglich und nutzen Sie flächige Formen, ohne zusätzliche Effekte. Achsen und Hilfslinien können horizontal oder vertikal gesetzt werden. Dabei ist es essenziell, sie visuell ansprechend und möglichst barrierefrei zu gestalten. Im Rahmen der Barrierefreiheit gibt es bei Diagrammen einige Dinge zu beachten. Dies umfasst die Bereitstellung von Textalternativen wie Beschreibungen oder Zusammenfassungen, die zentrale Informationen vermitteln. Farbliche Kontraste müssen ausreichend sein. Strukturelle Elemente wie Achsenbeschriftungen und Legende sollten klar lesbar und leicht verständlich sein. Zusätzlich empfiehlt es sich, auf die ausschließliche Verwendung von Farbe zur Information Vermittlung zu verzichten und redundante visuelle Markierungen wie Labels oder Symbole einzusetzen. Im Bezug auf den Hintergrund sollte für bestmögliche Lesbarkeit und Kontraste wenn möglich weiß verwendet werden.
Für den Farbeinsatz gelten die Prinzipien aus den Basiselementen. Um eine bestmögliche Lesbarkeit zu erzielen, kommen jedoch die hellste Farbabstufung von UI-Blau (UIBlau100) und Grau (Grau100) in Diagrammen nicht zum Einsatz. Achten Sie beim Einsatz von Schrift in Diagrammen auf einen möglichst hohen Kontrast (4.5:1 für Barrierefreiheit).
Um eine inhaltliche Zuordnung über eine Farbentsprechung zu erzeugen, können Sie auf das komplette UI-Farbspektrum zurückgreifen. Die fünf Risikofarben sind jedoch für Diagramme nicht vorgesehen.
Gitternetzlinien werden nur dann verwendet, wenn sie für das Verständnis des Diagramms erforderlich sind. Sind die Segmente direkt beschriftet, bedarf es keiner Gitternetzlinien.
Bei der Verwendung von Gitternetzlinien oder für Achsen empfehlen wir eine Linienstärke von 0,5 pt und Grau500 für Printmedien, 1 px und Grau in Digitalmedien und 0,75 pt und Grau700 in Office-Anwendungen.
Achten Sie auf auf gute Farbkontraste und stellen Sie Zusammenfassungen der wesentlichen Inhalte als Alternativtext bereit, damit Diagramme auch bei visuellen Einschränkungen verständlich bleiben.
Um Segmente besser voneinander unterscheidbar zu machen, kann mit Trennlinien oder Lücken gearbeitet werden. Für diese empfehlen wir eine Linienstärke von 0,5 pt für Printmedien, 1 px in Digitalmedien und 1,5 pt in Office-Anwendungen. Diese entsprechen auch dem Mindestabstand für die Lücken.
Legenden in Diagrammen sollten klar, präzise und leicht verständlich sein, und sie sollten alle notwendigen Informationen ergänzend zu visuellen Elementen bereitstellen. Achten Sie zusätzlich auf ausreichend Kontrast zur besseren Lesbarkeit.
Die Legende können Sie frei platzieren. Achten Sie darauf, dass sie innerhalb eines Mediums einheitlich gesetzt ist.
Bei der Beschriftung am Diagramm können Sie auch Führungslinien verwenden. Sind die Daten beschriftet, so sind keine zusätzlichen Gitternetzlinien notwendig.
In barrierefreien Diagrammen darf Farbe nicht als einziges Unterscheidungs- und Zuordnungsmerkmal genutzt werden. Darum werden die Werte eines Diagramms zusätzlich mit einem Buchstaben, Label oder Symbol versehen, die in der Legende aufgeschlüsselt sind. Somit wird eine redundante visuelle Markierung geschaffen und eine eindeutige Zuordnung im Sinne der Barrierefreiheit gewährleistet. Für komplexe Diagramme kann auch eine tabellarische Darstellung hinzugefügt werden.
Beschriftungen der Segmente innerhalb eines Diagramms können je nach Inhalt über, unter oder auf dem Segment platziert werden. Werden Segmentbereiche sehr klein, kann mit einer Führungslinien gearbeitet werden um Zugehörigkeit zu visualisieren.
Liniendiagramme werden grundsätzlich mit durchgezogenen Linien dargestellt. Eine Unterscheidung erfolgt über das Hinzufügen einer Markierung am Ende oder an jedem Datenpunkt. Das Symbol selbst muss zum Hintergrund barrierefrei sein. Daher erhält dieses die Schriftfarbe des jeweiligen Mediums und einen Abstand zur visuellen Trennung zur Linie.
In Kreis-, Balken oder Säulendiagrammen wird mit vollflächiger Farbe gearbeitet. Die Differenzierung wird über ein Label wie einen Buchstaben geschaffen. Auf die Verwendung von Mustern als Unterscheidung wird verzichtet. Sind visuelle Darstellungen zu komplex, sollte auf alternative Darstellungen zurückgegriffen werden.
Diagramme benötigen grundsätzlich eine alternative Darstellung, die auch für assistive Technologien wie Screenreader zugänglich ist. Über zusätzliche textliche Beschreibungen oder Zusammenfassungen oder auch eine tabellarische Darstellung können zentrale Informationen vermitteln werden. Alternativtexte sollten eine Länge von 150 - 200 Zeichen nicht überschreiten. Daher ist hierfür in der Regel eine zweiteilige Alternativrepräsentation notwendig: Ein kurzer Alternativtext, der auf die erweiterte Variante hinweist und eine ausführliche alternative Darstellung an anderer Stelle.
Dies kann je nach Medium unterschiedlich gelöst werden.
Bitte vermeiden: Keine Gitternetzlinien in zwei Richtungen
Bitte vermeiden: Keine 3D-Effekte
Bitte vermeiden: Barrierefreie Diagramme ohne ein weiteres Unterscheidungsmerkmal neben der reinen Farbcodierung
Bitte vermeiden: Fehlende Trennung der farbigen Elemente
Vorheriges Kapitel Schaubilder Nächstes Kapitel Illustrationsstil
Drucken Nach oben
