Почему бы не использовать чистый черный (# 000) и чистый белый (#FFF)?


17

Новый Top Bar для Stack Exchange говорит:

Первое, что вы заметите, это то, что он действительно черный* .

* Джин указывает, что технически это не совсем черное: это # ​​212121.

В своем CSS я вижу,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Почему не «действительно черный»: почему «не совсем черный» лучше?

Точно так же для остальной части фона я вижу что-то вроде

background: #fdfdfd

Почему не чистый белый?

Я не спрашиваю конкретно о StackExchange - я имею в виду, является ли это хорошим общим правилом для любых / всех веб-сайтов: когда в спецификации дизайна, по-видимому, требуется черный или белый, следует ли мне использовать почти черно-белое вместо действительно черное и белое?

Применимо ли это «правило» и к другим цветам (какое именно правило)?

Это правило зависит от устройства?


Google всегда использует чисто белые фоны.
— Pacerier

Ответы:


18

Короче говоря, это легко для глаз;

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

Это отличный сайт для UX цветовых предложений / примеров и теории. И обсуждает контраст различных цветов на фоне, даже давая шестнадцатеричный код, который очень удобен.

Здесь также обсуждается контраст и цветовой баланс .

Это также кажется стилем, который имеет тенденцию, потому что более низкий контраст между bckgrounds делает контраст текста немного более приятным (на мой взгляд), как видно с цветом здесь и здесь. Эти образцы больше для просмотра цвета, чем их содержания в условия, о которых я хочу сообщить здесь.

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

Удачи в выборе цвета в будущем, это еще одно соображение, чтобы принять во внимание: D


1
Я понимаю, что ответы здесь должны быть короткими, поэтому спасибо за использование ваших ссылок для дальнейшего более подробного чтения (я новичок).
— ChrisW

Рад помочь (хотя бы немного). Ответ на этот вопрос состоит из 3 основных компонентов: теория цвета, предпочтение / стиль и дизайн UX. Невозможно покрыть каждый 100% в одном ответе (как вы упомянули). Поэтому я просто хотел дать вам краткий ответ, а также идею о том, что исследовать.
— Дженна

6

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

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

Следовательно, я думаю, что выбор 80% черного цвета - это компромисс между тем, чтобы сделать верхнюю полосу менее резкой и сохранить контраст внутри нее.

Для основного текста, обычно вы действительно хотите использовать чистый черный цвет на светлом фоне, чтобы максимизировать контраст и , следовательно , читаемость. (Это относится как к экрану, так и к печати.) Обратите внимание, что цвет фона для тела отличается от чисто белого лишь незначительно. В целом, веб-сайты часто выбирают фоны, которые немного не совсем белые. Одна из целей - сделать сайт более теплым или прохладным, выбрав бледно-розовый или синий (хотя здесь и нейтрально-серый).


На этом сайте даже div.post-textцвет переднего плана color: #111;вместо чистого черного. Почему бы не оставить читабельность или яркость экрана браузеру / устройству / пользователю по умолчанию для оптимизации?
— ChrisW

0

На мой взгляд ... Просто мода, тренды.

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

Существует тенденция «винтажных» изображений. Низкая насыщенность, размывается.

Размытый вид может сделать самый темный или белый цвет серым.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih=1007

Не только на фотографиях, но и в видео ... в том числе "счастливых" видео.

https://www.youtube.com/watch?v=9HjrFnKEE8w

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

Тенденция состоит в том, чтобы иметь больше «дружественных» сайтов, больше «интимных», так что это мягкость. Это также может дать более "кинематографический" взгляд, чем "телевизионный" взгляд.

Например, одна из противоположных тенденций в изображениях - это стиль Hdri look или стиль draggan, который усиливает контраст и микроконтраст.

В некоторых случаях размытое изображение может придать вид большего внутреннего динамического диапазона по сравнению с усилением контраста с отображением тона реального изображения с высоким динамическим диапазоном.


Также, если вся ваша палитра как-то ограничена, вы можете обмануть автобаланс вашего глаза. Ведущий к вашему более высокому динамическому диапазону. Художники используют это все время.
— joojaa

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