0Pricing
Web Accessibility Academy · Урок

Цвет, узор и прямые подписи

Кодируйте ряды данных так, чтобы их могли читать пользователи с нарушением цветового зрения.

«Цвет, узор и прямые подписи» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Часто задаваемые вопросы

Урок «Цвет, узор и прямые подписи» бесплатный?

Да — полный текст урока «Цвет, узор и прямые подписи» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.

Чему я научусь в уроке «Цвет, узор и прямые подписи»?

Кодируйте ряды данных так, чтобы их могли читать пользователи с нарушением цветового зрения. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web Accessibility Academy?

Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Цвет, узор и прямые подписи»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web Accessibility Academy?

Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Каждой диаграмме нужна текстовая альтернатива
  2. Запасной вариант в виде таблицы данных
  3. Цвет, узор и прямые подписи
  4. Интерактивные диаграммы с навигацией с клавиатуры
← Назад к Web Accessibility Academy