Цвет, узор и прямые подписи
Кодируйте ряды данных так, чтобы их могли читать пользователи с нарушением цветового зрения.
«Цвет, узор и прямые подписи» — бесплатный урок 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 — локальная установка не требуется.
Все уроки этого курса
- Каждой диаграмме нужна текстовая альтернатива
- Запасной вариант в виде таблицы данных
- Цвет, узор и прямые подписи
- Интерактивные диаграммы с навигацией с клавиатуры