Widget-Raster: Grundlagen und beste Praktiken
Erfahre, wie du Widgets effektiv auf einem Dashboard anordnest — responsive Gitter, Größenoptimierung und Benutzerkontrolle.
Artikel lesenStatusindikatoren und Farbcodierung richtig machen
Farben kommunizieren schnell — aber nicht immer eindeutig. Entdecke, wie du Farbpaletten für Status-Signale nutzt, die barrierefrei und verständlich sind.
Warum Farbe nicht ausreicht
Wir sehen jeden Tag Farbcodes — Ampeln, Warnlichter, Dashboard-Indikatoren. Aber hier’s die unbequeme Wahrheit: Etwa 8 % der Männer und 0,5 % der Frauen haben Farbsehschwächen. Das bedeutet, deine “rote Warnung” könnte für sie grau aussehen.
Das ist nicht nur ein Barrierefreiheits-Problem — es ist auch ein Designproblem. Wenn dein Dashboard auf Farbe allein setzt, verpasst ein großer Teil deiner Nutzer wichtige Informationen. Die gute Nachricht? Mit den richtigen Techniken schaffst du Status-Signale, die ALLE verstehen.
Die Grundlagen: Vier Farben, vier Bedeutungen
In den meisten Dashboards brauchst du eigentlich nur vier Status-Farben. Punkt. Nicht zehn, nicht fünf — vier. Das klingt simpel, aber es ist das Geheimnis von guten Systemen.
Grün: Aktiv/Erfolg
Alles läuft. System online. Daten importiert. Grün bedeutet “go”.
Gelb: Warnung
Aufmerksamkeit nötig. Speicher läuft voll. Anfrage dauert lange. Nicht kritisch — noch.
Rot: Fehler
Etwas ist kaputt. Server down. Datenbank nicht erreichbar. Sofort handeln.
Blau/Grau: Neutral/Info
Informationen. Inaktiv. Keine Aktion nötig. Einfach Daten.
Wichtig: Diese vier Farben sollten sich auch für farbenblinde Menschen unterscheiden — nicht nur durch Farbe, sondern auch durch Form, Symbol oder Text-Label.
Kontrast: Die unterschätzte Regel
Hast du schon mal ein Status-Licht auf einem dunklen Hintergrund angeschaut und dich gefragt, ob es rot oder orange war? Das ist ein Kontrast-Problem. Nicht schlecht designt — schlecht für deine Augen.
Die WCAG-Norm (Web Content Accessibility Guidelines) sagt: Dein Status-Indikator braucht mindestens ein Kontrastverhältnis von 3:1 zu seinem Hintergrund. Für Text noch besser: 4,5:1. Das ist keine Empfehlung — das ist Standard, wenn dein Dashboard für alle sein soll.
Praktische Regel:
- Status-Farbe auf weißem Hintergrund? Brauchst du eine dunkle Variante der Farbe (z. B. Dunkelgrün statt Hellgrün)
- Status-Farbe auf dunklem Hintergrund? Brauchst du eine helle Variante (z. B. Hellrot statt Dunkelrot)
- Im Zweifelsfall: Test mit einem Kontrast-Checker (WebAIM, Contrast Ratio)
Redundanz: Farbe + etwas anderes
Das ist der Trick, den gute Designer verstehen: Verlasse dich nicht allein auf Farbe. Nutze auch Symbole, Text oder Muster. Das nennt sich Redundanz — und es ist nicht redundant, es ist smart.
Statt nur ein rotes Quadrat zu zeigen, zeig ein rotes Quadrat mit einem X-Symbol. Oder ein rotes Quadrat mit dem Text “Fehler”. Jetzt verstehen ALLE deinen Status — farbenblind oder nicht. Das ist echte Barrierefreiheit.
Nur Farbe
Funktioniert nicht für farbenblinde Menschen
Farbe + Icon
Besser. Grün + Häkchen. Rot + X.
Farbe + Icon + Text
Am besten. Keine Verwechslungen möglich.
Umsetzung: So baust du es richtig
01
Definiere deine Farbpalette
Vier Farben, vier Zustände. Wähle Farben, die sich auch auf verschiedenen Hintergründen unterscheiden. Tipp: Nutze eine Farb-Design-System-Datei (Figma, Adobe XD) und speichere beide Varianten — eine für helle, eine für dunkle Hintergründe.
02
Teste Kontraste
Verwende einen kostenlosen Kontrast-Checker. WebAIM ist populär. Deine Farben müssen mindestens 3:1 Kontrast zum Hintergrund haben. Text mindestens 4,5:1. Keine Ausnahmen.
03
Füge Icons oder Text hinzu
Jeder Status-Indikator braucht mindestens ein Icon oder einen Text-Label. Nicht optional. Das macht den Unterschied zwischen “sieht gut aus” und “funktioniert für alle”.
04
Teste mit Farbenblindheit-Simulatoren
Verwende Browser-Erweiterungen wie Colblindor oder Stark, um zu sehen, wie dein Design für Menschen mit Deuteranopie (Rot-Grün-Blindheit) aussieht. Das ist keine theoretische Übung — das ist echte Validierung.
Echte Beispiele aus der Praxis
Hier sind Farbpaletten, die wirklich funktionieren — für normale Augen und für Farbenblinde.
Empfohlene Palette (getestet & validiert):
- Grün (Erfolg): #22c55e — Hell genug auf Weiß, dunkel genug auf Grau
- Gelb (Warnung): #eab308 — Kontrastreich, aber nicht zu hell
- Rot (Fehler): #ef4444 — Klassiches Signalrot mit guter Erkennbarkeit
- Blau (Info): #3b82f6 — Neutral und leicht unterscheidbar von den anderen
Diese Palette wurde mit realen Farbenblindheits-Simulatoren getestet. Sie funktioniert auch für Menschen mit Protanopie (Rot-Blindheit) und Tritanopie (Blau-Gelb-Blindheit).
Das Wichtigste zusammengefasst
Gute Status-Indikatoren sind nicht kompliziert — sie brauchen nur ein paar einfache Regeln:
Vier Farben, vier Zustände: Grün (aktiv), Gelb (Warnung), Rot (Fehler), Blau (Info)
Kontrast testen: Mindestens 3:1 zum Hintergrund, 4,5:1 für Text
Redundanz nutzen: Farbe + Icon + Text, nicht nur Farbe
Mit Simulatoren testen: Sieht dein Design auch farbenblind gut aus?
Das ist alles. Keine komplizierten Regeln, keine Design-Gimmicks. Nur klare, verständliche Status-Indikatoren, die für ALLE funktionieren. Dein Dashboard wird besser aussehen und mehr Menschen können es verstehen.
Hinweis
Die in diesem Artikel besprochenen Farben und Richtlinien basieren auf WCAG 2.1-Standards und bewährten Praktiken der Designindustrie. Spezifische Hex-Codes können je nach Bildschirmkalibrierung und Umgebungslicht variieren. Für kritische Anwendungen (medizinische Geräte, Flugsicherung) solltest du zusätzliche Sicherheitstests durchführen. Dieser Artikel dient zu Bildungszwecken und ist keine offizielle Richtlinie für Accessibility-Compliance.
Weitere Artikel zu Dashboard-Design
