Цвет в дизайне

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

Пусть цвет никогда не передаёт сообщение в одиночку

Критерий успеха WCAG 2.2 1.4.1, «Использование цвета», стоит на уровне A, самом базовом. Он говорит, что цвет не должен быть единственным визуальным способом передать информацию, указать действие, побудить к ответному действию или отличить визуальный элемент. Красная рамка на поле формы с ошибкой допустима, если есть ещё значок или строка текста, говорящая, что неверно. Линейной диаграмме с пятью цветными линиями также нужны подписи, разные стили линий или маркеры. Ссылкам в абзаце нужно подчёркивание или другая подсказка, кроме цвета.

Причина отчасти в цветовом зрении. В тексте OpenStax по нейронауке объясняется, что у некоторых людей есть генетическая вариация, дающая им два типа колбочек вместо трёх или один пигмент колбочек, который работает иначе. Они не слепы к цвету, но некоторые цвета, которые большинство различает, выглядят для них одинаково. Красно-зелёные формы самые частые и затрагивают около 8% мужчин. Важны и другие причины: телефон на ярком солнце, дешёвый проектор, чёрно-белая распечатка. Дизайн, который работает в оттенках серого, работает во всех этих случаях.

Всю тяжёлую работу делает светлота

Поэтому опытные дизайнеры планируют палитру в два прохода. Сначала они решают ступени светлоты: очень светлый фон, средний тон для границ, тёмный тон для текста. Затем выбирают тона. Проверка каждой пары текста и фона по коэффициенту контраста из урока 6 — самый быстрый способ узнать, достаточно ли ступени удалены друг от друга. Комплементарные тона не гарантируют контраста. В модели фирменный оранжевый и его синий комплементарный цвет имеют одинаковые насыщенность и светлоту HSL, а отношение между ними всего 1.06:1. Два цвета могут быть максимально далеки по тону и всё равно плохо читаться друг на друге.

Простой рабочий метод объединяет уроки этого курса. Начни с одного тона, подходящего теме. Используй гармонию из урока 4, чтобы выбрать один или два вспомогательных тона. Отдай доминирующему цвету большую часть площади, примерно 60%, второстепенному 30%, а акценту 10%, это правило из руководства University of Delaware. Подбери светлоту для каждой пары цветов текста и фона, пока каждая не достигнет хотя бы 4.5:1, или 3:1 для крупных заголовков и значков. Наконец, проверь, что ничто не зависит только от цвета: у ошибок есть слова, у ссылок подчёркивание, у диаграмм подписи.

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