Должны ли области контента с высоким содержанием быть белыми / светлыми?


9

Многие веб-сайты, разработанные так, чтобы их было легко читать (например, nytimes.com или ilovetypography.com ), используют белый фон с черными шрифтами для облегчения чтения контента. Нужно ли использовать светлые цвета только для областей с высоким содержанием или фоны темного цвета могут быть одинаково читаемыми?

Ответы:


14

Темные фоны обычно считаются менее читаемыми, чем светлые фоны. Достаточный уровень контрастности также очень важен для читабельности.

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

Если у вас много текста, вы должны использовать светлый или белый фон. Это легче для глаз и имитирует то, к чему мы привыкли, когда мы читаем газеты или книги. Вы также можете использовать светлый или белый для медиа-контента, но он выглядит менее хитро.

Для дальнейшего чтения: светлый текст на темном фоне против читабельности


5

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

Стиль «черный на белом» или «темный на свету» большинства веб-сайтов связан с бумажной парадигмой. Например, люди, знакомые с бумажными документами, могут легко распознать текстовый процессор с белым фоном и черным текстом, и это стало нормой в вычислительной технике. На мой взгляд, это действительно позор; Я ненавижу смотреть на свой белый экран весь день и повредить глаза.

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


3
Я не уверен, что «белое на черном на самом деле легче для глаз при просмотре на светоизлучающих экранах… потому что передается меньше света». правда. Возможно, если бы я был в очень темной комнате; но белый цвет на моем экране отрегулирован так, что он воспринимается примерно так же, как лист белой бумаги на моем столе, и я считаю, что когда я многократно перевожу взгляд с одного на другого, мои глаза вынуждены меньше приспосабливаться.
e100

Это возможно возможно. Я, конечно, не хотел сказать, что это не может зависеть от других факторов.
Мэтью Читал

1
С другой стороны, когда я читаю светлый текст на темном фоне, у меня лично возникают проблемы при записи (после изображения), и я нахожу их нечитаемыми.
Горацио

@ e100: Полагаю, ваш экран либо слишком тусклый (я бы сказал, около 60-70 кд / м²), либо свет на вашем столе довольно яркий, либо и то и другое :). В любом случае, я бы определенно согласился с тем, что ученикам в этом случае будет мало что делать, если они будут перемещаться между напечатанным и отображаемым текстом.
thebodzio

@ MatthewRead: я бы лучше сказал "яркость".
thebodzio

0

Я бы сказал: пусть люди выбирают правильную комбинацию для них. Некоторые предпочитают светлый на темном, другие темный на ярком - трудно сказать, какой из них лучше, даже если кто-то делает научный обзор по этому вопросу. Кроме того, настройки могут меняться в зависимости от условий просмотра. Простое переключение тем было бы неоценимо - не все используют свои собственные таблицы стилей CSS. Кстати, пара статей, которые я видел по этому вопросу, основана на довольно коротких текстовых примерах - около пары тысяч слов. Было бы интересно посмотреть, что происходит, когда текст длиннее, например книга из 5 глав, каждая из которых насчитывает несколько тысяч слов.

Другие ответы упоминают контраст как основной фактор читабельности. Я считаю несправедливым отделять контраст от общей яркости при рассмотрении этой проблемы. Связанная статья на bereastreet цитирует, что «… белый текст на черном фоне более контрастен по сравнению с противоположным…». Я могу более или менее согласиться с остальной цитатой, но это просто чушь :). Контраст , понимается как разница между coolors, точно так же. Это общая яркость, которая отличается. Такое утверждение может быть принято, только если мы определим что-то как «воспринимаемый контраст». Я также считаю, что условия просмотра имеют решающее значение для удобства чтения. То, что хорошо работает при ярком свете, может быть болезненным, когда вокруг темно.

Одна вещь, я думаю, не может быть подчеркнуто слишком ясно и ясно о самом контрасте, это то, что он должен быть «правильным» во всем этом. Не только «достаточно», но и «не слишком». Я работаю в небольшом издательстве, и чаще всего я вижу, как люди выбирают яркую, как ад (военнопленный перешел на синий) бумагу для своих книг, насчитывающих более 150 страниц. Это их право как клиентов, часто поддерживаемое утверждением, что «легче читать, особенно для пожилых (sic!) Людей, красивый черный текст на яркой белой бумаге». В то же время я провожу свой неофициальный опрос среди людей, которые много читают. Все из опрошенных сказали, что чересчур яркая бумага убивает их глаза. Часто они обращаются к более старым проблемам - тем, у которых был их шанс пожелтеть;), просто чтобы иметь возможность читать их с комфортом. Я думаю, что то же самое верно для дисплеев. Достаточно контраста - да ... просто не слишком много.

И еще одно замечание: когда я упоминаю чтение текста на бумаге (а бумага яркая как ад;)), в качестве условий просмотра я предполагаю флуоресцентный свет, около 2800-3200 К.


0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.