Есть ли проблема с использованием черного текста на белом фоне?

Почему многие веб-сайты используют цвет текста, отличный от #000000, черный, когда фон белый?

Например, этот текст будет отображаться с использованием темно-серого:

.post-text {
   color: #333;
}

Были ли проведены исследования по этой теме?

83 голоса | спросил Yannick Blondeau 25 J000000Wednesday12 2012, 19:04:55

13 ответов


90

Высокий контраст, такой как черный на белом, может вызвать напряжение глаз. Также есть данные, что это особенно плохо для людей с дислексией. Для получения дополнительной информации читайте статьи на Движение UX и Центр дислексии Бристоля .

WCAG предоставляет подробную информацию о том, что допустимый цветовой контраст, но не указывайте верхний предел. Лично мне нравится использовать другой алгоритм, который обеспечивает предупреждение о высоком контрасте. Для получения дополнительной информации см. Эту статью в Spider Trax: « Не удалось ли получить W3C-контрасты? »

Слегка от темы, но проверьте Contrast-A , хороший инструмент, сделанный Das Plankton для выбора доступных цветовых схем.

ответил Sheff 25 J000000Wednesday12 2012, 19:15:14
13

Отключенные черные цвета (# 333, # 222, # 2a2a2a, # 444) имитируют контрастность материалов для печати на веб-типографии. Он также может улучшить читаемость больше, чем чистый белый и чистый черный, как уже сказал Шефф.

ответил rohicks 25 J000000Wednesday12 2012, 21:16:35
12

Вот интересная статья: Совет по дизайну: никогда не используйте черный

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

ответил radex 24 PM00000060000003931 2012, 18:06:39
6

Черный текст не проблема. Яркий белый фон. Этот фоновой блик является причиной напряжения глаз. Серый текст только делает это хуже, поскольку пользователи часто напрягаются, чтобы читать - вот почему серый текст часто занимает больше времени, чем черный текст. Фактически, многие люди могут «увидеть» всю страницу черного текста и получить представление о сообщении в одно мгновение - почти невозможно достичь такого быстрого сканирования с серым текстом. В этом ключе белый на черном может быть проще глаза - хотя шрифт и размер важны. Классический рабочий стол Windows (белый на синем /сером) очень легко читается.

По смежному вопросу тенденция к «плоскому» дизайну показала, что целые страницы стали белыми. Помимо бликов, кликабельные области становятся неотличимыми от пассивных областей. Как это улучшает удобство использования? Что случилось с: - Меню /Ссылки /Содержание на контрастных панелях? - «Кнопки» имеют оттенок, градиенты или скосы? - Иконы остаются многоцветными и текстурированными, а не примитивными и монотонными?

ответил Tarian 22 J000000Tuesday14 2014, 16:21:25
4

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

Многочисленные научные статьи * показывают, что высококонтрастный текст можно читать быстрее, чем низкий контраст; руководящие принципы W3C для веб-доступа обеспечивают формулу минимального контраста (см. AERT ). Упорядоченный веб-сайт Contrast Rebelion предоставляет сборник ссылок на статьи академических исследований по читаемости текста и обоснование для избежания светло-серого на белые фоны.

* Я попытался опубликовать пару, но система репутации этого сайта не позволит мне размещать более двух ссылок. Посетите ссылки на сайте ContrastRebelion в качестве отправной точки для фактических исследований (я никоим образом не афилирован с сайтом).

ответил TuringTest 15 J0000006Europe/Moscow 2015, 16:43:01
3

Использование черного текста на белом фоне может, очевидно, сделать ваш экран контрастным. Чтобы ваш экран был удобен для просмотра, вы можете изменить яркость и подать заявку на приложение под названием F.lux. Это бесплатное программное обеспечение, позволяющее автоматически изменить цвет вашего компьютера на время суток, без бликов на глазах.

На самом деле цвет не тот момент, время, когда он смотрит на него. И самая опасная часть экрана монитора и компьютера - синий. Это может легко повредить ваш глаз, вызвать напряжение глаз и другие проблемы. Знайте больше опасности синего света с здоровьем человека действительно важно для дальнейшей защиты глаз.

ответил Daphne Yang 27 42014vEurope/Moscow11bEurope/MoscowThu, 27 Nov 2014 07:26:18 +0300 2014, 07:26:18
2

Я дислексичен и имею проблему с серой на белом и сером сером. У меня нет проблем с черным на белом или черном на светло-сером. Не все люди с дислексией одинаковы, и не все люди могут читать веб-сайты со смехотворно плохой контрастностью, которые мы навязывали нам в наши дни. Попробуйте поговорить с пользователем сайта и пользователями программного обеспечения.

ответил Rex Kinder 16 FebruaryEurope/MoscowbTue, 16 Feb 2016 05:04:21 +0300000000amTue, 16 Feb 2016 05:04:21 +030016 2016, 05:04:21
2

Чтобы избежать путаницы и подтвердить, что заданный вопрос по-прежнему действует на сегодняшний день:

Инструменты, такие как Firefox Reader или Safari Reader (Desktop & iPhone), а также основные веб-платформы, такие как m.twitter.com, facebook, Medium (веб-приложение и Android-приложение), apple.com, Google, недавно запущенные TechCrunch, а также этот сайт здесь, все на самом деле используют «почти черный» текст на белом фоне на сегодняшний день (март 2018 года) - в техническом смысле вопрос задает вопрос: не очень серый, но не черный на 100% : Значения, такие как rgba (0,0,0,84), # 111111, # 14171a или # 333333

Некоторые используют полный контраст от #ffffff до # 000000, хотя, например, Amazon Kindle (Android) или www.w3.org. По крайней мере, мобильные экраны, как правило, тускнеют.

ответил Richard Bruskowski 14 MarpmWed, 14 Mar 2018 12:52:02 +03002018-03-14T12:52:02+03:0012 2018, 12:52:02
1

Недавно я участвовал в создании UX платформы социального сотрудничества, и мы были довольно серьезны в отношении доступности. В качестве части соответствия руководящим принципам доступности проверка цветового контраста для ключевых компонентов, связанных с информацией, была важной задачей. WCAG 1.4 ( http: //www.w3. org /TR /2005 /WD-WCAG20-20050630 /# visual-audio-contrast ) требует, чтобы цветовой контраст находился на определенном уровне. Я полностью второй ответ отвечу sheff

ответил mysticpixels 12 J0000006Europe/Moscow 2013, 22:15:08
1

Когда темные цвета RGB на экране преобразуются в цвета XYZ в глазу, а затем к чему-то подобному цвету оттенка насыщенности-насыщенности мозгом, небольшие изменения значений RGB приведут к небольшим изменениям XYZ, которые затем дают небольшие изменения в оттенке и насыщенности (которые я буду называть одновременно цветными). Когда более темные цвета переводятся в HSL, изменения в значениях RGB с одинаковым абсолютным размером приведут к большим изменениям в XYZ и, следовательно, к большим изменениям в цветности. Когда более темная область данного оттенка /насыщенности находится рядом с более легкой областью с тем же оттенком /статусом, граница обычно будет слегка размыта (поскольку глазное яблоко фокусируется хорошо, но не идеально), но все области на границе должны иметь одинаковые цветность. Даже если есть нелинейности в процессе преобразования цветов RGB в память в цвета XYZ в глазном яблоке, любая последующая неравномерность в цветности будет незначительной.

Тем не менее, при слишком темных цветах небольшие изменения в значениях RGB могут привести к большим изменениям цветности. Если в процессе преобразования цветов RGB на компьютер в цвета XYZ в глаза возникают какие-либо нелинейности, различия в воспринимаемой цвете могут быть довольно большими. Если значение RGB (0,0,0) воспринимается так, как будто оно (0.0001, 0, 0), то оно будет красноватым; если он воспринимается как (0,0,0.0001), он будет синеватым. Если использовать фоновый цвет (96,128,128) и цвет переднего плана (3,4,4), передний и задний фон будут иметь одинаковую цветность. Если вместо этого используется цвет переднего плана (0,0,0), то воспринимаемая цветность частей текста может не только отличаться от той, которая имеет фон, но может быть легко непостоянной и неравномерной. Несмотря на то, что цветность таких темных объектов не имеет смысла, это не означает, что бессмысленные вариации цветности не будут отвлекать.

ответил supercat 24 Jpm1000000pmSat, 24 Jan 2015 22:10:13 +030015 2015, 22:10:13
1

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

Microsoft и коллекция браузеров не соответствуют широкой публике. MS предоставляет широкий спектр визуальных решений для своих «Windows» и визуальных предложений. Тем не менее, одним из важных факторов является читаемость новостей /медиа-текст для пользователя. Можно было бы надеяться, что MS и группа браузеров предоставят выбор текста и цветовых вариантов, которые более точно отвечают потребностям отдельных лиц. Мои личные недостатки переносятся в ebery аспект публикации. Попробуйте прочитать инструкции по приготовлению пищи, светлый загар на оранжевом. Или белый на светло-серый. Выглядит хорошо для визуального эффекта, но ZERO для практичности. Personnaly, я, как правило, покупаю предметы, которые дополняют мой стиль жизни и потребности. Хотел бы я отказаться от этого компьютера и других электронных устройств. Основываясь на единодушной глупости поставщиков, этот вариант может стать реальностью раньше, чем нет. Я хочу быть ab, e, чтобы выбрать фон, текст и цвет (черный), позволяющий методу легко читать текст на экране моего компьютера без деформации. Период.

ответил John 2 AM00000040000001431 2016, 04:34:14
1

Я на 100% с вышеуказанным вкладом. | Весь этот серый текст чрезвычайно затрудняет чтение на экранных и бумажных документах, книгах, инструкциях по медикаментам и т. Д. И, похоже, все хуже, более серый и более серый текст. Явная потребность в контрасте была полностью потеряна, пока не достигнет точки, где текст выглядит эстетически сладким или прохладным, но не имеет практической цели. Я думаю, что это добавляет к вытеснению чтения и ценности печати, постепенно приближаясь к журналистике и анализу, распространяемому через видео, веб-ины и изобразительные медиа. Хорошо, поскольку они предназначены для некоторых целей, они никогда не могут содержать подробностей и изощренности письменного отчета и анализа. Любой, кто ценит печатный и письменный информационный контент, должен проводить кампанию за видимость печати. ​​Не говоря уже о том, что социальное исключение оно создает для людей с визуальными трудностями.

ответил David Lamb 30 J0000006Europe/Moscow 2017, 14:52:14
1

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

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

Mozilla заявляет на своих сайтах поддержки, что одна из функций Reader View заключается в добавлении контраста, что обычно не требуется, если вы не уменьшили контрастность в первую очередь. Их выбор цветов для Reader View является общепринятой ссылкой минимального контраста, который вы должны предоставить.

ответил STOPIT 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 16:37:01 +0300 2017, 16:37:01

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132