0Pricing
Web Accessibility Academy · Lektion

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

  1. Jedes Diagramm braucht eine Textalternative
  2. Die Datentabellen-Alternative
  3. Farbe, Muster und direkte Beschriftungen
  4. Mit der Tastatur navigierbare interaktive Diagramme
← Zurück zu Web Accessibility Academy