Best Practices bei der Farbwahl für Diagramme

  1. 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.

  2. Kontrast

    • Farben nebeneinanderliegender Kategorien müssen gut kontrastieren

  3. Angemessene Sättigung

    • Vermeide übermäßige Sättigung. Verwende neutrale Töne für unwichtige Kategorien, Akzentfarben für wichtige.

  4. Begrenzte Farbanzahl

    • Ideal: 5–6 Farben, maximal 10. Mehr Farben wirken unübersichtlich und erschweren die Lesbarkeit.

  5. 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.

  6. 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.

  7. 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

Beispiel-Farbschemas

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

P20 Farbschema Barrierefrei

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
Demo Plots Heller Mode
Demo Plots Heller Mode