0Pricing
Web Accessibility Academy · Lesson

Color, Pattern, and Direct Labels

Encode series so color-blind users can read them.

Color, Pattern, and Direct Labels is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Frequently asked questions

Is the “Color, Pattern, and Direct Labels” lesson free?

Yes — the full text of “Color, Pattern, and Direct Labels” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.

What will I learn in “Color, Pattern, and Direct Labels”?

Encode series so color-blind users can read them. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Web Accessibility Academy?

No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Color, Pattern, and Direct Labels” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Web Accessibility Academy lesson?

Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Every Chart Needs a Text Alternative
  2. The Data Table Fallback
  3. Color, Pattern, and Direct Labels
  4. Keyboard-Navigable Interactive Charts
← Back to Web Accessibility Academy