Когда следует использовать белый текст на темном фоне




Главная   Форумы   Обсуждения материалов сайта analyst.by   Когда следует использовать белый текст на темном фоне

В теме 6 ответов, и 3 участника, последнее обновление сделано пользователем Аватар (Hawkeye) Александра Привадо 6 г, 5 мес. назад.

Показано 7 ответов - от 1 до 7 (всего 7)
  • Автор
    Сообщения
  • 01.05.2011 в 16:29 # 7290
    Аватар (Belle Morte)
    Belle Morte
    Админ
    Многие сайты используют черный текст на светлом фоне, потому что такое сочетание легко читать. Однако у белого текста на темном фоне также есть преимущества. Знание, в каких случаях следует использовать прямой и обратный контраст, поможет вам улучшить дизайн.
    Читать далее.
    Поделиться:

    Цитировать

    01.05.2011 в 21:02 # 7291
    Аватар (Вадим Мустяца)
    Вадим Мустяца
    Подписчик
    Спасибо, полезная статья!

    Помню, в одной из игр «Что? Где? Когда?» был вопрос именно о том случае, когда специалисты рекомендуют использование печати белого текста на чёрном фоне. Ответ для меня был, честно сказать, неожиданным: театральная программка. А ведь действительно — такая печать наиболее удобна для чтения при недостатке освещения [во время спектакля]. Стимуляция светочувствительных рецепторов всех трёх типов становится в этом случае весьма кстати, тогда как отражение света минимально (поскольку отражать практически нечего) и слова не сливаются. (Знатоки, кстати, тогда вопрос «не взяли» даже с «помощью клуба», хотя версия за столом высказывалась. Кто-то из зала (Новиков, насколько я помню) сказал, что видел такой печатный приём на визитках представителей той самой компании, о которой шла речь в вопросе.)

    В заголовках же такой ход, безусловно, используется с расчётом на обратный эффект. Раздражение рецепоторов призвано захватить внимание читателя, что, к сожалению, не всегда таит в себе благие цели, как то помощь в ориентировании по тексту. Но тут уж ничего не поделаешь :-) Маркетинг и PR никто не отменял (кстати, упомянутые выше визитки — достаточно яркое тому подтверждение).

    Ещё мне кажется, что вместо использованного термина «сканирование» лучше бы подошло более привычное нам «чтение по диагонали». Впрочем, и так всё более чем понятно. Ещё раз спасибо за толковый перевод! ;-)

    Поделиться:

    Цитировать

    02.05.2011 в 18:08 # 7292
    Аватар (Belle Morte)
    Belle Morte
    Админ
    Отличный пример с театральной программкой: жаль, что его не берут на вооружение, регулярно сталкиваюсь с нечитабельными в условиях недостаточного освещения сочетаниями: с черным шрифтом на темно-красном фоне, например. Зато в автомобилях это поняли довольно оперативно: сейчас, пожалуй, и не встретишь прямого контраста где-нибудь на спидометре.
    Планирую перевести еще несколько статей похожей тематики: думаю, знание таких вещей пойдет на пользу :)
    Поделиться:

    Цитировать

    02.05.2011 в 18:34 # 7293
    Аватар (Вадим Мустяца)
    Вадим Мустяца
    Подписчик

    Планирую перевести еще несколько статей похожей тематики: думаю, знание таких вещей пойдет на пользу :)

    Я даже больше скажу — оно зачастую просто жизненно важно! Отлично, что на это обращают внимание: потенциал семантической нагрузки в самых обыденных вещах просто огромен, на мой взгляд. И это отнюдь не пустой comme il faut, а реальная возможность сделать мир гораздо дружелюбнее человеку.

    Поделиться:

    Цитировать

    03.05.2011 в 18:51 # 7294
    Статья хорошая, ни убавить ни прибавить, поэтому всуну свои пять копеек уже по поводу выбранной схемы "тёмный фон — светлый текст".

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

    И важный момент про снижение контраста в статье упомянут :)

    Годный инструмент для выбора сочетания цветов текста и фона: http://dasplankton.de/ContrastA/ Учитывается яркость, контраст, но самое замечательное — симуляция разновидностей дальтонизма — того, как видят это сочетание люди с различными нарушениями цветового зрения (и проверка на соответствие Web Content Accessibility Guidelines).

    Поделиться:

    Цитировать

    03.05.2011 в 18:59 # 7295
    Аватар (Belle Morte)
    Belle Morte
    Админ

    Годный инструмент для выбора сочетания цветов текста и фона: http://dasplankton.de/ContrastA/ Учитывается яркость, контраст, но самое замечательное — симуляция разновидностей дальтонизма — того, как видят это сочетание люди с различными нарушениями цветового зрения (и проверка на соответствие Web Content Accessibility Guidelines).

    К слову сегодня на хабре опубликовали статью Пять бесплатных инструментов для выбора цветовой схемы сайта[/url]. Часть инструментов довольно известная, рекомендую обратить внимание на http://colorschemedesigner.com/.

    Поделиться:

    Цитировать

    03.05.2011 в 19:02 # 7296

    [quote="Hawkeye"]
    К слову сегодня на хабре опубликовали статью [url=http://habrahabr.ru/blogs/web_design/118597/]Пять бесплатных инструментов для выбора цветовой схемы сайта[/url]. Часть инструментов довольно известная, рекомендую обратить внимание на [url]http://colorschemedesigner.com/[/url].

    [/quote]

    Да, и вышеприведенный там упоминается. Мне ещё приглянулся http://www.colorotate.org/ Только он не очень интуитивно понятен :)

    Поделиться:

    Цитировать

Показано 7 ответов - от 1 до 7 (всего 7)

Вы должны авторизироваться для ответа в этой теме.