Аккуратнее с сочетаниями цветов

Как-то я писал статью про SAST и сделал к ней такую титульную иллюстрацию:

Здесь стрелки обозначают две трассы передачи данных: красные стрелки — перемещение скомпрометированных данных от пользователя, синие — небезопасный XML-парсер.

На эту иллюстрацию получил два замечания:

  1. не очень красивые изгибы (сейчас не о них);
  2. недостаточный контраст синей стрелки.

Справедливо. Тёмно-синяя стрелка действительно недостаточно контрастирует: вокруг много кода разного оттенка синего.

Мне предложили такой исправленный вариант:

Заметили подвох?

Красный и тёмно-синий не создавали пару противоположностей, а зелёный и красный такую пару создают. Контраст добавили, но исходный смысл потерялся.

Теперь изображение говорит: вот красные стрелки — это плохо, так не надо; вот стрелки зелёные — это хорошо, нужно так. Логика изменилась.

Мы с детства привыкли к такому цветовому сочетанию и соответствующему смыслу:

  • зелёная лампочка — ОК, красная — не ОК;
  • зелёный сигнал светофора — безопасно, иди, красный — опасно, стой.

Подобная интерпретация срабатывает на автомате.

Как вариант исправления с сохранением контраста — сделать все стрелки красными. Получилось так:

Мораль: аккуратнее с сочетаниями цветов.

Отправить
Поделиться
Запинить
1 комментарий
Полина Слипченко 1 год

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

Сергей Васильев 1 год

Ай, спасибо. :)

Я думаю, в этом случае нормально обойтись только красным цветом.
У уязвимости, изображённой на схеме 2 составляющие:

  • опасные данные;
  • опасный парсер.

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