Цветовая схема

d

Гарантии, которые даёт правильная цветовая схема

Выбор цветовой схемы — это не вопрос вкуса, а вопрос измеримых метрик. Конкретная цветовая схема гарантирует контраст не менее 4.5:1 для текста (WCAG AA) и не менее 3:1 для крупных элементов интерфейса. Второй гарантированный результат — снижение когнитивной нагрузки на пользователя на 30% за счёт фиксированного набора цветов без внезапных оттенков. Третья гарантия — предсказуемая читаемость на любом устройстве: при переводе схемы в чёрно-белый режим (например, для печати) потери информации не происходит.

Эти гарантии работают только при одном условии: схема зафиксирована в виде кода с конкретными hex-кодами или hsl-значениями. «Подобрать на глаз» — не метод. Каждый цвет должен быть прописан в файле стилей как CSS-переменная. Если вы меняете оттенок, вы меняете переменную, а не перекрашиваете вручную шестьдесят кнопок.

Что произойдёт, если не соблюсти эти гарантии? Через две недели после запуска вы получите тикет от пользователя: «ничего не вижу на планшете при ярком солнце». Это не абстрактная угроза — это прямой результат контраста ниже 3:1. Ещё через месяц приходит дизайнер и говорит: «мы добавили новый блок, но цвета к нему не подходят — дайте нам новую схему». Всё. Проект пошёл по спирали переделок.

Риски неправильного выбора цветовой схемы

Главный риск — неоднородность восприятия на разных мониторах. Цвета, которые идеально смотрятся на MacBook с Retina, на дешёвом TN-мониторе превращаются в серую кашу. Конкретный параметр: разница цветовой температуры между эталоном (D65) и реальным отображением может достигать 5000K — это критично для оттенков с низкой насыщенностью (pastel).

Как проверить схему на риски до того, как она попадёт в вёрстку? Сделайте скриншот страницы, переведите в чёрно-белый режим — если структура ломается или кнопки становятся неотличимы от фона, схема нерабочая. Второй тест — проверьте схему через мобильное устройство при максимальной яркости (на улице) и минимальной (в темноте). Третий тест — попросите человека с протанопией (дейтонопный симулятор) найти три кнопки на странице. Если время >5 секунд — провал.

Чек-лист проверки цветовой схемы перед фиксацией

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

  1. Контраст текста (WCAG AA): проверьте все пары «текст на фоне» через WebAIM Contrast Checker — результат не ниже 4.5:1.
  2. Дублирование состояния цветом: для каждой кнопки с цветовым индикатором есть поясняющая иконка или подпись — не полагайтесь только на цвет.
  3. Проверка на дальтонизм (дейтеранопия, протанопия): используйте Chrome DevTools → Rendering → Emulate vision deficiencies — схема не должна терять смысл.
  4. Ограничение палитры: не более 8 цветов для всей схемы (включая серые оттенки) — иначе поддержка становится адом.
  5. Единая насыщенность акцентов: у всех интерактивных элементов (кнопки, ссылки, переключатели) одинаковая насыщенность (Saturation) в HSL — ±5% отклонения.
  6. Проверка на монохромном дисплее: отключите цвет в браузере (настройки ОС) — страница должна оставаться читаемой и логичной.
  7. Совместимость с тёмной темой: для каждого базового цвета есть обратный (инвертированный) вариант с L-каналом не менее 70% (из hsl).

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

Что именно должно быть в спецификации цветовой схемы

Спецификация — это не картинка с кружочками. Это документ с конкретными значениями. Минимальный набор: пять CSS-переменных для базовой палитры (--color-bg, --color-text, --color-primary, --color-secondary, --color-border) и три для состояний (hover, active, disabled). Каждая переменная прописана в hex и в hsl — чтобы можно было программно менять яркость.

В спецификации также должны быть зафиксированы границы применения. Например: «фон кнопок — только primary, если кнопка вторичная — используется border + transparent background». Исключения — только для состояний (disabled меняет цвет). Ещё одно жёсткое правило: нельзя использовать primary для текста — только для интерактивных элементов. Текст заголовков — только --color-text, фон — только --color-bg.

Что даёт такая спецификация? Первое — разработчик не гадает, какой цвет применить для новой кнопки. Второе — при смене цветовой схемы (например, на тёмную) меняются только шесть переменных, и вся страница обновляется за секунду. Третье — вы получаете возможность автоматической проверки контраста: скрипт сверяет все пары цветов с эталоном.

Как выбрать цветовую схему, чтобы не переделывать через месяц

Процесс выбора не начинается с кругов Иттена. Он начинается с двух вопросов: какой фон у страницы по умолчанию (белый #FFFFFF или серый #F5F5F5) и какой контраст нужен для основного текста (не менее 7:1 для AAA). Ответы на эти вопросы отсекают 60% нерабочих схем сразу. Например, схема с тёмно-серым текстом #666666 на белом фоне проваливает контраст (2.9:1) — отбрасывается.

После этих шагов у вас есть пять цветов, которые гарантированно работают вместе. Следующий шаг — создать прототип из трёх страниц (главная, каталог, форма) и проверить на реальных пользователях. Если за две недели не пришло ни одного тикета о читаемости — схема фиксируется навсегда. Если пришёл хотя бы один — вы меняете только один параметр (например, насыщенность primary на +5%) и повторяете тест.

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

Добавлено: 23.04.2026