Unterscheidbarkeit
Farben sollten in Diagrammen vorrangig durch ihren Farbton (Hue) unterscheidbar sein – also durch grundlegend verschiedene Farben wie Blau, Rot, Grün oder Orange. Unterschiede allein in Helligkeit (z. B. Hellblau vs. Dunkelblau) oder Sättigung (kräftig vs. blass) sind oft nicht ausreichend, da sie für viele Betrachter – insbesondere bei ungünstigen Lichtverhältnissen, auf schlechter Hardware oder bei Sehschwächen – nur schwer wahrnehmbar sind.
Kontrast
Farben nebeneinanderliegender Kategorien müssen gut kontrastieren
Angemessene Sättigung
Vermeide übermäßige Sättigung. Verwende neutrale Töne für unwichtige Kategorien, Akzentfarben für wichtige.
Begrenzte Farbanzahl
Ideal: 5–6 Farben, maximal 10. Mehr Farben wirken unübersichtlich und erschweren die Lesbarkeit.
Hintergrund beachten: helle Farben auf dunklem Hintergrund, kräftige Farben auf hellem Hintergrund
Auf einem hellen Hintergrund – wie er in klassischen Diagrammen auf Papier oder in Office-Dokumenten verwendet wird – eignen sich dagegen kräftige, dunklere Farbtöne. Sehr helle oder pastellige Farben wirken auf Weiß schnell ausgewaschen oder nahezu unsichtbar, was die Lesbarkeit einschränkt. Hier gilt: Je feiner oder kleiner das Diagrammelement, desto höher sollte der Kontrast zum Hintergrund sein.Besondere Aufmerksamkeit ist bei der Umstellung zwischen Light- und Dark-Mode erforderlich: Farben, die in einem Modus gut funktionieren, sind im anderen möglicherweise schlecht lesbar.
Markenkonformität beachten: Unternehmensfarben verwenden, wenn kontrastreich und unterscheidbar
Corporate Designs (CD) bzw. der Markenrichtlinien gezielt in der Visualisierung eingesetzt werden sollten, um einen einheitlichen, professionellen Auftritt zu gewährleisten. Viele Unternehmen definieren klare Vorgaben zu Primär- und Sekundärfarben, Farbabstufungen sowie deren bevorzugte Einsatzbereiche.
Barrierefreiheit berücksichtigen
Farbenblindheit berücksichtigen: Rot und Grün nicht als einzige Unterscheidungsmerkmale verwenden
Farbpaletten mit Tools auf Farbenblindheit testen (z. B. Viz Palette, ColorBrewer)
Ausreichender Kontrast zwischen Diagrammelementen und Hintergrund sicherstellen
Informationen nicht nur über Farbe vermitteln – zusätzliche visuelle Kodierungen nutzen (z. B. Muster, Linienstile, direkte Beschriftungen)
Beschriftungen ausreichend groß und in gut lesbarer Schriftart gestalten
Für Screenreader geeignete Beschreibungen und Alternativtexte bereitstellen
| Palette / Quelle | 1. Farbe | 2. Farbe | 3. Farbe | 4. Farbe | 5. Farbe |
|---|---|---|---|---|---|
| Category 10 D3 |
RGB (31, 119, 180) Hex #1F77B4 |
RGB (255, 127, 14) Hex #FF7F0E |
RGB (44, 160, 44) Hex #2CA02C |
RGB (214, 39, 40) Hex #D62728 |
RGB (148, 103, 189) Hex #9467BD |
| Set2 D3 |
RGB (102, 194, 165) Hex #66C2A5 |
RGB (252, 141, 98) Hex #FC8D62 |
RGB (141, 160, 203) Hex #8DA0CB |
RGB (231, 138, 195) Hex #E78AC3 |
RGB (166, 216, 84) Hex #A6D854 |
| Dark 2 ColorBrewer |
RGB (27, 158, 119) Hex #1B9E77 |
RGB (217, 95, 2) Hex #D95F02 |
RGB (117, 112, 179) Hex #7570B3 |
RGB (231, 41, 138) Hex #E7298A |
RGB (102, 166, 30) Hex #66A61E |
| Pastel 1 ColorBrewer |
RGB (251, 180, 174) Hex #FBB4AE |
RGB (179, 205, 227) Hex #B3CDE3 |
RGB (204, 235, 197) Hex #CCEBC5 |
RGB (222, 203, 228) Hex #DECBE4 |
RGB (254, 217, 166) Hex #FED9A6 |
| Set1 ColorBrewer Set1 |
RGB (228, 26, 28) Hex #E41A1C |
RGB (55, 126, 184) Hex #377EB8 |
RGB (77, 175, 74) Hex #4DAF4A |
RGB (152, 78, 163) Hex #984EA3 |
RGB (255, 127, 0) Hex #FF7F00 |
| Viridis (Matplotlib / Viridis) |
RGB (253, 231, 37) Hex #FDE725 |
RGB (94, 201, 98) Hex #5EC962 |
RGB (33, 145, 140) Hex #21918C |
RGB (59, 82, 139) Hex #3B528B |
RGB (68, 1, 84) Hex #440154 |
| Palette / Quelle | 1. Farbe | 2. Farbe | 3. Farbe | 4. Farbe | 5. Farbe | 6. Farbe | 7. Farbe | 8. Farbe |
|---|---|---|---|---|---|---|---|---|
| Category 10 D3 |
RGB (31, 119, 180) Hex #1F77B4 |
RGB (255, 127, 14) Hex #FF7F0E |
RGB (44, 160, 44) Hex #2CA02C |
RGB (214, 39, 40) Hex #D62728 |
RGB (148, 103, 189) Hex #9467BD |
rgb(140, 86, 75) Hex #8C564B |
rgb(23, 190, 207) Hex #17BECF |
RGB (253, 231, 37) #FDE725 |
| P20 Colors |
Dunkelblau Hex #00468c 9.3:1 |
Orange Hex #cd5038 4.4:1 |
Grün Hex #26673A 6.8:1 |
Rot Hex #bf1722 6.2:1 |
Violett Hex #9375C7 3.7:1 |
Hellorange-d40 Hex #907027 4.6:1 |
Türkis Hex #00818b 4.7:1 |
Hellorange #f7bc3d 1.3:1 |
| P20 Colors Dark |
Dunkelblau-50 Hex #7fa2c4 6:1 |
Orange ESH Hex #f87a34 5.9:1 |
Grün-30 Hex #549575 4.5:1 |
Rot-ESH Hex #ff4d4d 4.9:1 |
Violett-30 Hex #b69dd9 6.7:1 |
Hellorange Hex #f7bc3d 9.3:1 |
Türkis-30 Hex #4ca7ae 5.6:1 |
Grau-d15 #a2a8ab 9.1:1 |