Цвета, которые остаются читаемыми

У акцентного цвета одна работа

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

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

Текст поверх фотографии

Фотография — это не фон. Это сотни разных фонов сразу, и ваш текст лежит на всех них одновременно. Имя, которое отлично читается на тёмной куртке, исчезает там, где начинается небо, а версия, которую вы проверили на своём экране, была удачным кадрированием.

Лечится это затемняющим слоем между картинкой и текстом, а не более жирным шрифтом. Жирные буквы на пёстрой фотографии остаются на пёстрой фотографии: штрихи становятся толще, но шум за ними никуда не девается. Тёмная вуаль поверх всего изображения сжимает диапазон под собой, и любой участок картинки становится тем, на чём текст может лежать. В tapmy.link у этого слоя есть ползунок именно поэтому: вы поднимаете затемнение до момента, когда читать комфортно, и фотография на этом значении всё ещё видна.

Контраст без терминов

Забудьте про цифры. Контраст — это разница в светлоте между текстом и тем, что за ним, и провалы всегда одной формы: серый текст средней светлоты на светло-сером блоке, бледный оттенок на белом, белое на цвете, который оказался светлее, чем выглядел. Если вам приходится наклоняться к экрану, наклоняться придётся и остальным, а большинство просто не станет. Проверять при этом стоит на том экране, что у посетителя, а не на вашем настольном.

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

• Прищурьтесь: если подпись сливается со своей кнопкой, пара не работает.
• Сделайте скриншот и обесцветьте его — разница в цвете исчезнет, разница в светлоте останется.
• Проверяйте сначала самый мелкий текст, а не заголовок: мелкий отваливается первым.
• Смотрите на страницу, которую не трогали месяцами, а не только на свежий блок.
• Попросите прочитать её человека за сорок, на вытянутой руке и ничего не настраивая.

Фирменные цвета, которые не работают фоном

Фирменный цвет обычно нарисован для логотипа: небольшая фигура на белом поле, высокий контраст, секунда просмотра. Увеличенный до фона всей страницы, он ведёт себя совершенно иначе. Насыщенные жёлтый и голубой на телефоне при полной яркости превращаются в засветку. Средние по светлоте красный, оранжевый и зелёный — самые неудобные: белый текст на них немного тускл, чёрный немного тёмен, и правильного варианта нет. Логотип смотрят секунду, страницу читают минуту, и это разные задачи.

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

Цвет сам по себе не подпись

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

Лечится это дёшево: добавьте слово. Надпись «продано» в самой строке стоит семи символов и работает для всех, при любом свете, включая посетителя с тёплым ночным фильтром на экране. Цвет может усиливать смысл, но он не должен быть единственным, кто этот смысл несёт. Слово к тому же переживёт смену шаблона, а цвет — не обязательно.