Farbe, Muster und direkte Beschriftungen
Kodieren Sie Datenreihen so, dass farbenblinde Menschen sie lesen können.
Farbe, Muster und direkte Beschriftungen ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Color Alone Lies to Some Eyes
About 1 in 12 men cannot reliably tell certain colors apart. If your chart says red means loss, those users see no difference at all. 🎨
The Two-Channel Rule
Encode every series with a second channel besides color: a pattern, a shape, or a direct label. Color becomes a bonus, not the only cue.
Patterns Fill the Gap
Give bars and areas distinct patterns like stripes or dots. The fill tells the series apart even in pure grayscale.
<rect fill="url(#stripes)" />Different Shapes for Line Charts
On line charts, mark points with distinct shapes: circles, squares, triangles. Each line stays distinguishable without relying on hue.
Direct Labels Beat Legends
A separate legend forces a color-matching game. Put the label right on the line or slice so the name sits next to the data.
Pick a Color-Blind-Safe Palette
Some hue pairs, like red and green, are the hardest to tell apart. A color-blind-safe palette such as Okabe-Ito avoids those clashes.
Contrast Still Matters Here
Adjacent series and their text labels need real contrast. WCAG asks for at least 3 to 1 between meaningful graphical parts.
Test in Grayscale
Quick check: view your chart in grayscale. If you cannot tell the series apart, neither can a color-blind user. Fix it before shipping.
filter: grayscale(100%);Redundant Encoding Is the Goal
This stacking of cues is called redundant encoding: color plus pattern plus label. Lose one cue and the chart still reads clearly.
Do Not Drown in Cues
Balance matters. Heaping on every pattern at once gets noisy. Add just enough so each series is distinct and the chart stays calm.
It Helps in Bad Light Too
Direct labels and patterns also rescue charts viewed in sunlight, on cheap screens, or printed in black and white. Everyone wins. ☀️
Quick Check
Why is color alone a poor way to distinguish chart series?
Recap: More Than One Cue
You learned to never lean on color alone: add patterns, shapes, or direct labels, choose safe palettes, and test in grayscale. 🖤
Häufig gestellte Fragen
Ist die Lektion „Farbe, Muster und direkte Beschriftungen“ kostenlos?
Ja — der vollständige Text von „Farbe, Muster und direkte Beschriftungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Farbe, Muster und direkte Beschriftungen“?
Kodieren Sie Datenreihen so, dass farbenblinde Menschen sie lesen können. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Farbe, Muster und direkte Beschriftungen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jedes Diagramm braucht eine Textalternative
- Die Datentabellen-Alternative
- Farbe, Muster und direkte Beschriftungen
- Mit der Tastatur navigierbare interaktive Diagramme