Почему бы не использовать чистый черный (# 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.