Как сделать графики понятными для дальтоников

График может быть технически верным и всё равно оставаться непонятным. Обычная причина в том, что на цвет возлагают всю работу: красная линия означает одно, зелёная — другое, а легенда служит единственным ключом. Для людей с нарушением цветового зрения — и для многих, кто смотрит график при бликах, на плохом экране или в монохроме — это создаёт лишние сложности.

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

Ключевое правило: цвет не может быть единственной подсказкой

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

Хорошие альтернативы:

Прямые текстовые подписи и значения
Разные формы маркеров на линиях или точках
Сплошные, пунктирные и точечные стили линий
Штриховка, текстуры или контуры у столбцов и областей
Понятные иконки и описательный текст в легенде
Таблица данных или текстовое резюме с той же ключевой информацией

Лучшее сочетание зависит от типа графика и от того, нужен ли читателю быстрый обзор или точные значения.

Стройте график вокруг вопроса

Прежде чем выбирать цвета, сформулируйте одним предложением главную мысль графика. Например: «Продажи выросли во всех регионах, сильнее всего — на западе». Затем проверьте, смог бы читатель ответить на этот вопрос, если бы увидел график в оттенках серого.

Если нет, добавьте подсказку, не связанную с цветом. Эта простая проверка ловит самую частую ошибку доступности: привлекательную палитру, которая кодирует информацию только оттенком.

Прямые подписи лучше далёкой легенды

Легенда заставляет читателя сопоставлять маленький образец с элементом графика, иногда многократно. Это сложнее, когда цвета похожи или линии пересекаются. Если позволяет место, подписывайте ряд у конца линии, ставьте значения рядом со столбцами или помечайте важную точку прямо на графике.

Например, вместо синей, оранжевой и зелёной линий с легендой внизу поставьте название категории рядом с последней точкой каждой линии. Держите подпись достаточно близко, чтобы её нельзя было отнести к другому ряду. Цвет остаётся полезным, но опознаёт именно текст.

Подбирайте дублирующие подсказки под тип графика

Линейные графики

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

Не размещайте слишком много рядов на одном графике. Если их много, используйте набор небольших графиков с одинаковым масштабом вместо того, чтобы заставлять читателя распутывать плотную легенду.

Столбчатые диаграммы

Используйте прямые подписи категорий и значений. Если столбцы обозначают категории, которые нужно различать внутри одной группы, добавьте штриховку или чёткий контур помимо цвета. Техника G111 от W3C прямо описывает совместное использование цвета и штриховки в столбцах.

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

Диаграммы рассеяния и пузырьковые

Сочетайте формы маркеров с цветом и используйте достаточные размер и контраст, чтобы маркеры не терялись. Добавляйте обводку точкам, если заливка светлая или фон насыщенный. Если точки перекрываются, предложите фильтрацию, таблицу данных или второе представление, разделяющее группы.

Карты и тепловые карты

Кроме цвета заливки используйте подписи, границы, символы или штриховку. Схема транспорта, например, может сочетать цвет линии с характерным маркером остановки. На картограмме не делайте основной смысл зависимым только от плавного градиента «светлее — темнее»: добавьте видимую шкалу, значения и таблицу или текстовый вывод.

Проектируйте под контраст, а не только под разные оттенки

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

Для нетекстовых графических объектов, необходимых для понимания графика, руководство WCAG по нетекстовому контрасту обычно использует порог 3:1 относительно соседних цветов. Контекст имеет значение, и подпись или равнозначная таблица иногда передают информацию, не требуя различать саму графику. Считайте проверку контраста частью дизайн-ревью, а не заменой подписям и дублирующим подсказкам.

Используйте инструмент проверки контраста для оценки контраста текста интерфейса и простых визуальных элементов. Затем изучите график целиком: в реальных макетах есть соседство элементов, тонкие штрихи, состояния наведения и наложения, которые проверка одной пары цветов не улавливает.

Давайте данные, стоящие за картинкой

График — это резюме, а не замена доступа к данным. Если график несёт важное решение или утверждение, добавьте одно или несколько из следующего:

Таблицу рядом с категориями и значениями
Краткое письменное резюме главного вывода
Доступную выгрузку, например CSV
Развёрнутое описание для сложных визуальных связей
Доступные с клавиатуры подсказки или фокусируемое представление данных для интерактивных графиков

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

Практический чек-лист проверки графика

Используйте его перед публикацией отчёта, презентации, продуктового дашборда или статьи:

Говорит ли заголовок, о чём график и за какой период?
Можно ли опознать каждый ряд или категорию без опоры только на цвет?
Подписаны ли ключевые значения, есть ли они в таблице или описаны рядом в тексте?
Достаточно ли контрастны линии, маркеры, столбцы и элементы легенды там, где они соприкасаются или накладываются?
Читаемы ли подписи при обычном масштабе и на маленьком экране?
Избегает ли график неоднозначных красно-зелёных статусов вроде «хорошо» и «плохо» без текста или иконки?
Может ли пользователь с клавиатурой добраться до информации интерактивного графика?
Не выявляет ли проверка в оттенках серого или в симуляторе неоднозначных элементов?

Тестируйте на реальном контенте и с реальными людьми

Автоматические проверки и симуляции — полезное раннее предупреждение, но не доказательство, что график работает для каждого. Проверяйте готовый график в реальном размере, в том продукте или документе, где он появится. Попросите человека без подсказок назвать главный ряд, наибольшее значение и основной вывод.

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

Более широкие рекомендации по интерфейсу — в статье дизайн для дальтоников.

Пример: улучшаем график статусов

Представьте дашборд с пятью отделами: зелёные столбцы означают «в плане», красные — «отстаём», жёлтые — «под риском». Более доступный вариант может:

Добавить слово-статус к каждому столбцу: «В плане», «Под риском» или «Отстаём».
Использовать иконку в подписи — галочку, треугольник предупреждения или стрелку — с поясняющим текстом.
Использовать штриховку или контур как вторую визуальную подсказку.
Показывать фактический процент и целевое значение.
Дать таблицу под графиком с отделом, текущим значением, целью и статусом.

Цвет по-прежнему помогает многим быстрее считывать картину. Он просто перестаёт быть единственным путём к пониманию.

Главное

Доступные графики делают сообщение устойчивым. Прямые подписи, штриховка, стили линий, контраст и равнозначные данные помогают людям с нарушением цветового зрения понять ту же информацию, что и всем остальным, — и делают вашу работу яснее для всей аудитории.

Короткий ответ