Source: https://cd.union-investment.de/grundlagen/Grafikelemente/schaubilder
Die Stilistik der Schaubilder zeichnet sich durch einen reduzierten, flächigen Aufbau im UI-Farbklang aus. Einfache, geometrische Grundformen und der Verzicht auf zusätzliche Effekte sorgen für eine klare Kommunikation der Inhalte.
* Bitte beachten: : * Im Rahmen der Umsetzung von barrierefreien Schaubildern ist wichtig, dass Inhalte in klarer Struktur und mit sinnvoller Beschriftung gezeigt werden. Enthaltene Informationen müssen mit ausreichendem Kontrast gezeigt werden und Farbe darf nicht zur alleinigen Vermittlung von Information genutzt werden. Falls notwendig beschreibende Texte liefern.
Anwendungsbeispiele
Stilistik von Schaubildern
Farbigkeit von Schaubildern
Typografie in Schaubildern
Barrierefreie Schaubilder
Verwenden Sie einfache, geometrische Grundformen in flächiger Darstellung. Verzichten Sie auf zusätzliche Effekte wie Schatten, das Abrunden von Ecken, 3D-Effekte oder Farbverläufe.
Durch gezielten Farbeinsatz lassen sich Segmente deutlich voneinander trennen.
Um Bereiche voneinander zu unterscheiden und Zugehörigkeiten zu verdeutlichen, kann mit Trennlinien oder Lücken gearbeitet werden. Für diese wie auch für Verbindungslinien empfehlen wir eine Linienstärke von 0,5 pt für Printmedien, 1 px in Digitalmedien und 0,75 pt (Lücke/Abstand 1,5 pt) in Office-Anwendungen.
Sie können auch Abstände zwischen den Segmenten nutzen, um diese optisch noch deutlicher voneinander abzugrenzen.
Nutzen Sie bei der Farbgebung vorrangig den UI-Farbklang, UI-Blau in unterschiedlichen Abstufungen oder die Ergänzungsfarbe Grau in ihren Abstufungen.
Die Farbigkeit der Verbindungslinien ist je nach Medium unterschiedlich:
Weitere Ergänzungsfarben können Sie einsetzen, wenn diese zur Verdeutlichung des Inhalts erforderlich sind. Hierbei gelten die Prinzipien aus der Beschreibung der Basiselemente.
Texte auf Schaubildern müssen dem geforderten Kontrastverhältnis 4,5:1 zu ihrem Hintergrund entsprechen. Sollen die Flächen selbst auch visuell barrierefrei sein, muss auch hier auf ausreichend Kontrast zu deren Hintergrund geachtet werden (3:1). Hierzu kann auch mit einer Umrandung gearbeitet werden.
Für Typografie in Schaubildern gelten die Prinzipien aus den Basiselementen.
Darüber hinaus können Sie Textinhalte zentriert ausrichten, wenn das Schaubild rund ist oder der Text aus nur einem Wort besteht.
Achten Sie auf den Einsatz konsistenter Schriftgrößen innerhalb eines Mediums.
Aus Sicht der visuellen Barrierefreiheit sollte bei der Erstellung von Schaubildern neben der oben genannten Mindestkontraste auf eine klare Struktur der Inhalte und sinnvolle Beschriftung geachtet werden. Nutzen Sie hierbei nie Farbe zur alleinigen Vermittlung von Information. Es bedarf einer redundanten visuellen Markierung (z. B. Buchstabe, Symbol) um eine eindeutige Zuordnung im Sinne der Barrierefreiheit zu gewährleisten.
Für ein inklusives Design sollten Schaubilder auch für Screenreader zugänglich und nachvollziehbar sein oder mit einer Alternative ausgestattet werden. Dies kann ein zusätzlicher beschreibender Text direkt beim Schaubild oder an verwiesener Stelle sein, oder eine Tabelle ebenso wie ein für Screenreader erfassbarer Alternativtext.
Vorheriges Kapitel Tabellen Nächstes Kapitel Diagramme
