Научные схемы: сохраняйте смысл без цвета

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

Руководство рассматривает категориальные поясняющие схемы: схематическое изображение двух условий, групп или маршрутов. В нём используется наш исходный двухстрочный файл SVG (Scalable Vector Graphics) без экспериментальных данных. Непрерывным тепловым картам, микрофотографиям и графикам измерений нужна собственная обработка с учётом данных; не трассируйте их отметки в новые фигуры ради более ясного вида.

Определите, что цвет сообщает читателю

Начните с редактируемого исходника, пояснения к рисунку и наименьшего предполагаемого воспроизведения. Перечислите различия, которые читатель должен восстановить: какому условию принадлежит символ, куда ведёт маршрут или какую панель описывает подпись.

Затем мысленно скройте цвет. Если указания превращаются в «следуйте оранжевой линии» или «сравните синие круги», замените эту зависимость именами, которые читатель найдёт на рисунке. В реальной подаче используйте содержательные названия условий. «Условие A» и «Условие B» ниже — условные обозначения для демонстрации компоновки.

Рекомендации W3C по использованию цвета требуют видимой подсказки, например текста или формы, когда цвет передаёт информацию. Это рекомендации по веб-доступности, а не тест приёмки научного журнала. Тот же принцип дизайна полезен здесь: сохраните различие другим признаком.

Дайте каждому условию второй способ распознавания

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

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

Выбирайте палитру под целевой формат и сохраняйте читаемость подписей на фоне. Требования Nature к рисункам просят доступную палитру и показывают цветные квадраты легенды вместе с чёрным текстом. Они также не рекомендуют узоры и декоративное загромождение. Это поддерживает простые подписи и осмысленные символы вместо штриховки каждого объекта.

Попробуйте SVG с двумя условиями

Сохраните этот полный пример как conditions.svg. Откройте в браузере или векторном редакторе. В нём белый фон, две подписанные строки и нет внешних изображений или импортированных шрифтов. Разные символы намеренно обобщённые; они не представляют биологический механизм.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="240" viewBox="0 0 600 240">
  <rect width="600" height="240" fill="white"/>
  <g fill="white" stroke-width="4">
    <g stroke="#0072B2">
      <path d="M80 70H320"/>
      <circle cx="80" cy="70" r="16"/><circle cx="320" cy="70" r="16"/>
    </g>
    <g stroke="#D55E00">
      <path d="M80 170H320" stroke-dasharray="12 8"/>
      <polygon points="80,150 62,180 98,180"/><polygon points="320,150 302,180 338,180"/>
    </g>
  </g>
  <g fill="black" font-family="sans-serif" font-size="24">
    <text x="370" y="78">Condition A</text>
    <text x="370" y="178">Condition B</text>
  </g>
</svg>

Исходник сохраняет подписи текстом. Его stroke-dasharray="12 8" задаёт нижнему соединителю повторяющийся узор штриха и промежутка; спецификация пунктирных обводок SVG определяет, как эти длины следуют контуру. Ни подпись, ни треугольник не зависят от распознавания оранжевого.

1. Откройте версию 600 × 240. Подтвердите наличие обеих подписей, принадлежность кругов A, а треугольников — B.
2. Экспортируйте цветную копию, затем сделайте копию этого экспорта в оттенках серого. Сохраните цветной мастер. Проверьте, можете ли назвать оба условия и проследить соединители, не обращаясь к описанию цвета.
3. Сделайте уменьшенную копию исходника с width="300" и height="120", оставив viewBox прежним. Повторите оба экспорта. Это проверяет одно уменьшение, а не универсальный минимальный размер.
4. Проверьте файл, который действительно разместите в рукописи или слайде. Убедитесь, что подписи, символы и стили соединителей переживают экспорт и последующее изменение размера.

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

Мы отрендерили обе версии с librsvg в 600 × 240 и 300 × 120 пикселей, затем преобразовали каждый результат в оттенки серого с весами RGB 0.299R + 0.587G + 0.114B. Во всех четырёх версиях с дополнительными признаками подписи, различие круга/треугольника и сплошные/пунктирные соединители оставались видимыми и не обрезались. Синий и оранжевый контроля стали разными серыми значениями: 87 и 119 по шкале 0–255. Поэтому мы не называем контроль неразличимым. Улучшение — явное распознавание условий, не зависящее от оттенка.

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

Исправьте признак, который теряется в конечном размере

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

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

Согласуйте легенду с графикой. Заменяйте «оранжевая линия» названием условия и видимым признаком, например «Условие B, пунктирный соединитель». Для онлайн-рисунков также предоставляйте подходящую текстовую альтернативу или подпись, описывающую содержательное сравнение. Одни видимые подписи не устанавливают доступность для людей, не видящих рисунка.

Сохраняйте научное содержание при правке оформления

Изменяйте графики измерений в исходной программе построения и экспортируйте заново с сохранением исходных значений. Для микрофотографий храните оригиналы и следуйте правилам обработки изображений журнала. Политика Nature по достоверности изображений требует точного представления исходных данных в конечном изображении и описывает раскрытие обработки. Перерисовка до более опрятного вида не заменяет этот процесс.

Если осталась только отдельная растровая схема, процесс PerfectVector из научной схемы в SVG поможет восстановить редактируемые фигуры. Проверьте предпросмотр, затем разблокируйте результат для редактирования и экспорта SVG. Сравните каждую восстановленную связь и символ с источником, при необходимости восстановите подписи текстом. Восстановленная фигура полезна только при сохранении научного смысла. Если редактируемая графика уже есть, меняйте её напрямую; изменение цветов SVG рассматривает эту более узкую правку.

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

Частые вопросы

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

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

Нужно ли заменить все научные символы кругами и треугольниками? Нет. Пример использует обобщённые условные обозначения. Сохраняйте символы и стили линий с существующим научным смыслом и добавляйте подписи или другой совместимый признак.

Источники

1. W3C — Понимание использования цвета — Объясняет видимые альтернативы цвету и ограничения этого критерия доступности.
2. Nature — Подготовка рисунков: наши требования — Даёт процитированные рекомендации Nature по палитре, тексту легенды и загромождению.
3. W3C — Пунктирные обводки SVG — Определяет узор штрихов и промежутков полного исходного примера.
4. Nature — Достоверность изображений и стандарты — Задаёт ограничения исходных данных и обработки, лежащие в основе рекомендаций для научных изображений.