Сначала выберите способ кодирования
Сначала определите, обозначает ли цвет категории, упорядоченную величину или отклонение от содержательной середины. Категориальная палитра присваивает разные идентификаторы и не должна внушать порядок, которого нет в данных. Последовательная шкала меняется от малого к большому. Дивергентная показывает два направления вокруг явно названного центра. Смешение ролей искажает чтение даже при приятных оттенках. Ограничивайте число одновременных категорий уровнем, который можно подписать и различить.
- Для неупорядоченных категорий используйте разные оттенки и сохраняйте соответствие между связанными представлениями.
- Для величины используйте упорядоченное изменение светлоты и легенду с направлением и единицами.
- Дивергентную шкалу применяйте только при обоснованной середине, например нуле или целевом значении.
Не делайте цвет единственным ключом
WCAG 2.2 запрещает передавать информацию только цветом. Легенда из одних цветных квадратов всё равно заставляет сопоставлять оттенки. По возможности подписывайте данные напрямую и добавляйте формы маркеров, стили линий, узоры или пространственную группировку. Дублирование особенно важно для тонких линий, маленьких точек, соседних областей, печати и снимков экрана. Альтернативный признак обязан оставаться заметным при настоящем размере и плотности графика, а не только в увеличенном макете.
- Подписывайте важные линии и области напрямую, сокращая переходы к отдельной легенде.
- Сочетайте цвет со штрихами или формами маркеров, сохраняя каждый паттерн простым.
- Передавайте имена категорий доступным текстом и в подсказках, достижимых без мыши.
Измеряйте контраст в контексте
Для графических объектов и состояний, необходимых для понимания, WCAG обычно требует нетекстовый контраст не ниже 3:1 относительно соседних цветов. Сравнение зависит от контекста: столбец с фоном области, соприкасающиеся регионы или фокус с обеими сторонами. Подписи подчиняются требованиям к тексту: обычно 4,5:1 для обычного и 3:1 для подходящего крупного текста. Проверяйте реальный рендеринг, сглаживание и толщину, потому что слишком малая метка остаётся трудной даже при хороших числах.
- Измеряйте каждый необходимый знак относительно цвета непосредственно вокруг него.
- Проверяйте подписи отдельно: контрастный столбец не исправляет бледный текст.
- Повторяйте измерения для hover, выбора, приглушения, фокуса и других состояний.
Стройте поддерживаемый набор категорий
Начните с нейтральной поверхности и текста, затем выберите категории, различающиеся более чем по одному каналу. Если продукт уже использует красный для ошибки, сохраните этот цвет для семантики. Называйте токены по роли, документируйте целевой фон и назначайте резервную форму или узор. Когда категорий больше проверенного набора, объединяйте малые значения в «Другое» либо переходите к фильтрам и взаимодействию, а не генерируйте почти одинаковые оттенки.
- Называйте токены по роли, например chart-category-1, и сохраняйте проверенную пару переднего плана и фона.
- Сохраняйте один цвет категории во всех панелях, фильтрах, таблицах и экспорте.
- Задайте детерминированное переполнение вместо повторного использования цветов для разных значений.
Проектируйте легенду вместе со взаимодействием
Легенда должна раскрывать соответствие, не пряча данные. Сохраняйте исходный порядок, если он значим; иначе используйте документированный стабильный порядок. Позволяйте выделить категорию и из легенды, и из графика, с равнозначной клавиатурой и видимым фокусом. Не обозначайте выбор только насыщенностью или прозрачностью: добавляйте границу, форму, подпись либо изоляцию остальных меток. Подсказки дополняют подписи, но не должны быть единственным местом важных значений.
- Делайте элементы интерактивной легенды настоящими контролами с клавиатурой и доступными именами.
- Показывайте выбор границей или формой вместе с изменением цвета или прозрачности.
- Предоставляйте точные значения в таблице либо доступном эквиваленте визуализации.
Тестируйте реалистичные данные и форматы
Проверяйте плотные, редкие, крайние, отсутствующие и перекрывающиеся данные, а не идеальный пример. Просматривайте целевой размер, масштаб браузера, forced colors и оттенки серого; симуляция особенностей цветовосприятия полезна как дополнительная проверка, но не доказывает доступность. Проверяйте печать и экспорт, если они нужны. Просите рецензентов без подсказки распознать категории и значения, фиксируйте сбои по метке и контексту, сохраняйте тестовый набор и пары контраста для повторяемости.
- Проверяйте максимум категорий и минимальный размер метки на каждом поддерживаемом фоне.
- Проверяйте пропуски, отрицательные значения, тревоги, фокус и выбор без зависимости от оттенка.
- Документируйте предел палитры и выбирайте другой график, когда данные его превышают.
Первоисточники
Фактические утверждения статьи проверены по этим опубликованным спецификациям.