x
 
Александр Новолоков
31 октября 2011

Добрый день!

Возможно, от вопроса веет непрофессиональностью, но всё же. Как быть с цветом ссылки на фоне рандомного цвета?

P. S. Переучиваюсь с одежды на веб, судите строже :-)



Александр!

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

Очевидно, самый большой контраст — у чёрного и белого:

Чёрный на белом

А с цветными сочетаниями есть хитрость — оказывается, цвета радуги в чистом виде имеют разную светлоту.

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

Ахтунг: белый на красном!

Ничуть не хуже виден чёрный на жёлтых предупреждающих знаках:

Пригнитесь: чёрный на жёлтом

Работает и сочетание жёлтого с красным:

Кто сказал «Мао?»

Дизайнеры, не знающие основ цвета, допускают ошибку:

Дизайнер и сугроб

Зато светлая природа жёлтого делает его идеальным тоном для малоконтрастных плашек в книгах, журналах и на сайтах:

См. также

Для других цветов действуют те же правила.

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

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

  • См. также
  • Иоханнес Иттен. Искусство цвета. Издатель Д.  Аронов, Москва, 2000

Поделиться
Отправить

Комментарии

Дмитрий Ачкасов
31 октября 2011

Не уверен, что по теме отвечу. В интерфейсе «Метро» Микрософта на экране блокировки сотового телефона текст, указывающий дату и время, всегда белый, чтобы не было проблем с ярким фоном, операционка всегда делает между фоном и текстом 10%-ю полупрозрачную чёрную подложку.

Денис Атясов
31 октября 2011

Меня всегда мучил ещё один вопрос: как быть с ховером, какой цвет выбрать для белой ссылки на тёмно-синем фоне, например?


2 ноября 2011

Денис, как насчёт жёлтого?

Юрий Хан
31 октября 2011

При оформлении субтитров к видео хорошо работает приём «цветной текст с чёрной обводкой букв», ширина линии обводки и тень по вкусу. Применимо при достаточно больших размерах шрифта.

Александр Ким
1 ноября 2011

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

Существовало правило составления гербов по цветам. Все цвета делились на металлы (золотой — жёлтый, серебро — белый) и финифти — остальные цвета (от пяти до восьми).

Правило такое: металл накладывается только на финифть, а финифть только на металл.

Были и исключения из правил, но, как правило, это была дарованная монархом привилегия.

На картинке немецкий гербовник XV века.

Александр Каленюк
1 ноября 2011

Не могу согласиться насчёт простого принципа. Почему же «максимально контрастным»? Даже Чихольд вполне одобряет использование тонированной бумаги.

А вот, например, эти цветовые схемы вообще составлены по обратному принципу: http://ethanschoonover.com/solarized

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


2 ноября 2011

Александр!

Я говорю о читаемости как о видимости и различимости текста на фоне. Она растёт с контрастностью.

Вы говорите о комфорте длительного чтения, это другая история. Очевидно, если фон слепит ярко-белым, а текст — ярко-красным, читать долго не получится. Поэтому чтение на солнце даже обычной книги — всегда самоистязание.

Ваша гамма очень приятная, ей прямая дорога в Собаку.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

6 Что такое интерфейс? 2




Недавно всплыло

На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 1 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 Как попросить клиента помочь с дебагом? 1