Сочетания цветов для чтения: Какие цвета лучше всего подходят для чтения с монитора? — Хабр Q&A

Какие цвета лучше всего подходят для чтения с монитора? — Хабр Q&A

1. Контрастные цвета
В идеале это черный на белом, но как тут правильно пишут — яркий монитор будет белым бить по глазам. Лучше всего использовать не холодный белый, а теплый.
2. Специально спроектированные шрифты для мониторов
вроде верданы, тахомы, и пр.
В идеале не только спроектированный компьютерный шрифт или шрифт для веб, но и с отдельными глифами для каждого размера шрифта. Такие шрифты есть (мало, поищите, я даже не берусь назвать), они достаточно сглаженные даже с отключенным антиалиасингом, так как проектируются попиксельно, в т. ч. рассчитываются апроши, чтобы межбуквенное расстояние не гуляло, что тоже очень утомляет глаза и затрудняет чтение.
3. Отключенный или несильный антиалиасинг начертания
Да, с ним буквы выглядят симпатичнее, но глаз постоянно пытается сфокусироваться.

Из общих рекомендаций, если собираетесь много читать с монитора, то могу посоветовать также обратить внимание на интерлиньяж. Многие оставляют его по умолчанию, но для чтения он маловат. Сильно увеличивать тоже не стоит, так как будет теряться связь между строками, но скажем если автоматические мы имеем 12/14 pt, то лучше увеличить на 1 или 2 пункта, т. е. 12/16.

Ответ написан

Мне не совсем удобно читать, когда белый фон светит в глаза, особенно вечером.

Может дело в яркости экрана скорее? Связка черный с белым идеальна.

Ответ написан

@Mischuk как это ни странно — связка чёрного с белым — наиболее ужасна. К счастью, даже если Вы откроете текстовый редактор с белым фоном и начнёте писать чёрный текст, монитор не отобразит идеально белый, также как и идеально чёрный. Будь это так — в глазах бы рябило от контраста (разве только редкие личности могли бы спокойно читать).

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

По поводу мониторов — то тут очень хорошо работает тёмный фон. Дело в том, что сам по себе монитор — это лампа. Попробуйте посмотреть на яркую лампу. Ну, час, два… Печально, да? Впрочем, если за матовым стеклом — чуть лучше. Примерно это и происходит с монитором. Есть люди, у которых голова болит от LCD мониторов — всё таки это лампа за матовым стеклом. Но чёрные пиксели меньше пропускают света. То есть они более матовые. Поэтому — так лучше.

Ещё из советов — чем крупнее шрифт, тем лучше, однако, как и везде, сильно усердствовать не стоит. Как по мне — прямо тут (toster.ru) почти идеал. Лично мне нравится чуть мельче — больше помещается, но по среднему на больнице это таки идеал.

P.S. Я знаю очень мало ресурсов, что удачно использовали инвертированные цвета. Причина проста — элменты UI конфликтуют с фоном. А если их делать светлыми — слишком выбиваются. Так что это не просто, найти идеал.

Ответ написан

Комментировать

Таблица «безопасных» цветов

Этот инструмент сдан в архив и больше не поддерживается

255.255.204255.255.153255.255.102255.255.51255.255.0204. 204.0
FFFFCCFFFF99FFFF66FFFF33FFFF00CCCC00
      
255.204.102255.204.0255.204.51204.153.0204.153.51153.102.0
FFCC66FFCC00FFCC33CC9900CC9933996600
      
255.153.0255.153.51204.153.102204.102.0153.102.51102.51.0
FF9900FF9933CC9966CC6600996633663300
      
255. 204.153255.153.102255.102.0204.102.51153.51.0102.0.0
FFCC99FF9966FF6600CC6633993300660000
      
255.102.51204.51.0255.51.0255.0.0204.0.0153.0.0
FF6633CC3300FF3300FF0000CC0000990000
      
255.204.204255.153.153255.102.102255.51.51255.0.51204. 0.51
FFCCCCFF9999FF6666FF3333FF0033CC0033
      
204.153.153204.102.102204.51.51153.51.51153.0.5151.0.0
CC9999CC6666CC3333993333990033330000
      
255.102.153255.51.102255.0.102204.51.102153.102.102102.51.51
FF6699FF3366FF0066CC3366996666663333
      
255. 153.204255.51.153255.0.153204.0.102153.51.102102.0.51
FF99CCFF3399FF0099CC0066993366660033
      
255.102.204255.0.204255.51.204204.102.153204.0.153153.0.102
FF66CCFF00CCFF33CCCC6699CC0099990066
      
255.204.255255.153.255255.102.255255.51.255255. 0.255204.51.153
FFCCFFFF99FFFF66FFFF33FFFF00FFCC3399
      
204.153.204204.102.204204.0.204204.51.204153.0.153153.51.153
CC99CCCC66CCCC00CCCC33CC990099993399
      
204.102.255204.51.255204.0.255153.0.204153.102.153102.0.102
CC66FFCC33FFCC00FF9900CC996699660066
      
204. 153.255153.51.204153.51.255153.0.255102.0.153102.51.102
CC99FF9933CC9933FF9900FF660099663366
      
153.102.204153.102.255102.0.204102.51.204102.51.15351.0.51
9966CC9966FF6600CC6633CC663399330033
      
204.204.255153.153.255102.51.255102.0.25551. 0.15351.0.102
CCCCFF9999FF6633FF6600FF330099330066
      
153.153.204102.102.255102.102.204102.102.15351.51.15351.51.102
9999CC6666FF6666CC666699333399333366
      
51.51.25551.0.25551.0.20451.51.2040.0.1530.0.102
3333FF3300FF3300CC3333CC000099000066
      
102. 153.25551.102.2550.0.2550.0.2040.51.2040.0.51
6699FF3366FF0000FF0000CC0033CC000033
      
0.102.2550.102.20451.102.2040.51.2550.51.1530.51.102
0066FF0066CC3366CC0033FF003399003366
      
153.204.25551.153.2550.153.255102.153.20451.102.1530. 102.153
99CCFF3399FF0099FF6699CC336699006699
      
102.204.25551.204.2550.204.25551.153.2040.153.2040.51.51
66CCFF33CCFF00CCFF3399CC0099CC003333
      
153.204.204102.204.20451.153.153102.153.1530.102.10251.102.102
99CCCC66CCCC339999669999006666336666
      
204. 255.255153.255.255102.255.25551.255.2550.255.2550.204.204
CCFFFF99FFFF66FFFF33FFFF00FFFF00CCCC
      
153.255.204102.255.20451.255.2040.255.20451.204.2040.153.153
99FFCC66FFCC33FFCC00FFCC33CCCC009999
      
102.204.15351.204.1530.204.15351.153.1020. 153.1020.102.51
66CC9933CC9900CC99339966009966006633
      
102.255.15351.255.1530.255.15351.204.1020.204.1020.153.51
66FF9933FF9900FF9933CC6600CC66009933
      
153.255.153102.255.10251.255.1020.255.10251.153.510.102.0
99FF9966FF6633FF6600FF66339933006600
      
204. 255.204153.204.153102.204.102102.153.10251.102.510.51.0
CCFFCC99CC9966CC66669966336633003300
      
51.255.510.255.510.255.00.204.051.204.510.204.51
33FF3300FF3300FF0000CC0033CC3300CC33
      
102.255.0102.255.5151.255.051.204.051.153.00. 153.0
66FF0066FF3333FF0033CC00339900009900
      
204.255.153153.255.102102.204.0102.204.51102.153.5151.102.0
CCFF9999FF6666CC0066CC33669933336600
      
153.255.0153.255.51153.204.102153.204.0153.204.51102.153.0
99FF0099FF3399CC6699CC0099CC33669900
      
204. 255.102204.255.0204.255.51204.204.153102.102.5151.51.0
CCFF66CCFF00CCFF33CCCC99666633333300
      
204.204.102204.204.51153.153.102153.153.51153.153.0102.102.0
CCCC66CCCC33999966999933999900666600
      
255.255.255204.204.204153.153.153102.102.10251. 51.510.0.0
FFFFFFCCCCCC999999666666333333000000
      

Все цвета интернета

Вашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна.

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

Цвета из нашей палитры везде будут отображаться правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов.

Как пользоваться палитрой

Палитра состоит из 36 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 0, 51, 102, 153, 204, 255.

Над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).



Комбинации цветов и удобочитаемость

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

Гуру

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

Используйте цвета с высоким контрастом между текстом и фоном. Оптимальный
для разборчивости требуется черный текст на белом фоне (так называемый позитивный текст).
Белый текст на черном фоне (негативный текст) почти так же хорош. Несмотря на то что
коэффициент контрастности такой же, как и для позитивного текста, инвертированная цветовая схема
немного сбивает людей с толку и немного замедляет их чтение. Удобочитаемость страдает
гораздо больше для цветовых схем, которые делают текст светлее, чем чистый черный,
особенно если фон сделать темнее чисто белого (Nielsen 2000,
стр. 125).

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

Исследование

Большинство исследований, посвященных изучению читаемости текста на компьютере
экрана в зависимости от сочетания цветов переднего плана и фона.
до всемирной паутины. Одним из наиболее последовательных выводов является то, что
влияние цветов на удобочитаемость непоследовательно (Radl 1980). Например,
в одном исследовании не удалось найти каких-либо существенных различий между 24 различными цветами.
комбинации по производительности с задачей текстового поиска (Pace 1984). С другой
рука, независимо от конкретного сочетания цветов, более высокий уровень контрастности
кажутся более читабельными (Bruce and Foster, 1982; Radl, 1980).

Существует очень мало экспериментальных исследований читабельности веб-страниц, основанных на
о цветах шрифта/фона (Hill and Scharff 1997). Единственным исключением является серия
двух экспериментов, проведенных Хиллом и Шарфом (Hill and Scharff 1997,
Хилл и Шарфф, 1999). Результаты этих исследований согласуются с
исследования до Интернета в этом более высоком контрасте, как правило, оказывались более
удобочитаемый. Однако, опять же, отношения были далеки от совершенства. Например,
они обнаружили, что зеленый текст на желтом фоне и черный текст на светлом
серый фон был более читабельным, чем черный на белом в разных
эксперименты. Чтобы еще больше усложнить ситуацию, их результаты часто
различались в зависимости от типа шрифта. Так, например, читабельность
зеленый на желтом, упомянутый выше, был в основном со времен нового романа, но
было не так сильно с воздушным шрифтом.

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

Другим методом осмысления «удобочитаемости» может быть вопрос:
пользователям просто оценить удобочитаемость данных комбинаций. Хотя это
менее «объективна», с одной стороны, она имеет то преимущество, что
человек может знать, что нужно принимать во внимание другие факторы, а не только те вещи, которые
приведет к лучшей производительности при поиске. «Чтение» обычно
включает в себя больше, чем просто поиск данного слова в тексте. Фактически,
это именно то, что Хилл и его коллеги сделали в качестве предварительного условия для одного из
веб-эксперименты. Они собрали данные с веб-сайта, где они спросили
много предметов, чтобы оценить комбинации многих различных цветовых комбинаций.
Их общие выводы были следующими: 1) Черно-белые постоянно оценивались как
самый читаемый; 2) Цветовые комбинации, включающие черный, оценивались выше.
читабельнее, чем те, которые этого не сделали; и 3) Более темный текст на светлом фоне.
были оценены выше, чем более светлый текст на темном фоне.

Удержание

Мы с моим студентом Патриком Ханной провели эксперимент, направленный на
эта проблема сочетаний цветов текста/фона и удобочитаемости с некоторыми
повороты (Холл и Ханна, 2003). Прежде всего, вместо использования базовой обработки
меры в качестве наших объективных мер читабельности, мы использовали тесты на припоминание,
что намного «выше
уровень» типа обработки. На образовательных сайтах, конечно, вспоминать
важный фактор, но он также важен и в других контекстах, таких как
электронная коммерция, где сайт гораздо более удобен, если клиент может сохранить
информацию с одной страницы на другую. Мы также явно включили различные
виды информации. У нас были участники, изучавшие страницы, которые содержали образовательные
информацию о нервной клетке (нейроне), и мы попросили их изучить информацию
о вымышленном телевидении («галлавью»). Наше исследование было
также отличается от приведенных выше тем, что мы включили различные рейтинговые меры.
Мы не только попросили участников оценить «читабельность»
страницы, но мы попросили их оценить проблемы, связанные с эстетикой и
степени, в которой это произвело любую тенденцию к покупке. Точнее, наш
меры рейтинга делятся на четыре категории: удобочитаемость, эстетика, профессиональная
взгляд и поведенческое намерение (степень, в которой цвета сделали
участник хочет купить товар).

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

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

Алгоритм

Описание

Нам, веб-дизайнерам, безусловно, было бы полезно, если бы у нас был какой-то
формулы, основанной на некоторых количественных характеристиках цветов, чтобы определить
«читабельность», чтобы мы могли просто применить этот алгоритм и
знать наверняка, была ли комбинация читаема или нет. На самом деле такой алгоритм
существует, хотя (как мы увидим) он не идеален. У w3c есть специфический
рекомендации по приемлемым цветовым сочетаниям, основанные на
Уровни RGB заданных цветов.

Рекомендации W3c основаны на двух формулах, которые дают два разных
контрастные инструменты. Одна формула представляет разницу в оттенке, а другая представляет
разница в яркости. Для обоих вам нужно только знать представление RGB
переднего плана и фона.

Ниже приведена формула для представления разницы в оттенках

Максимум ((Текст R – Фон R), (Фон R – Текст R)) +
Максимум ((Текст G – Фон G), (Фон G – Текст G)) + Максимум
((Текст B – Фон B), (Фон B – Текст B))

Ниже приведена формула для представления яркости

((R X 299) + (G X 587) + (B X 114)) / 1000

Разница в яркости представляет собой абсолютное значение разницы между
яркость текста и фона.

Согласно w3c, показатель разницы яркости 125 или выше и оттенок
разница 500 или выше представляет собой приемлемый контраст для удобочитаемости.

Неудивительно, что существуют веб-сайты, на которых можно рассчитать эти баллы.
автоматически. Например, Сочный
Studio: Color Contrast Test позволяет вам делать эти сравнения,
ввод шестнадцатеричного кода для каждого цвета.

Проверка

Рекомендуемый w3c алгоритм был разработан Крисом Ридпатом и его коллегами.
Они также опубликовали подтверждение
учиться в сети. В психологических измерениях (часто называемых психометрией)
термин «валидность» относится к степени, в которой мера фактически представляет
что он должен измерять. Итак, в случае этих формул удобочитаемости
вопрос в том, отражают ли они на самом деле степень, в которой люди находят
данная комбинация читаема? Чтобы ответить на этот вопрос, Ридпат и
коллеги создали 42 версии текста на фоне веб-страницы и классифицировали
каждый по семибалльной шкале от наиболее читаемого до наименее читаемого на основе
их оттенки и яркость оценки различия. Тогда у них было несколько участников
оценивайте эти страницы на основе удобочитаемости. Они обнаружили, что, действительно,
сильная и значимая связь между оценками удобочитаемости
испытуемые дали, и оценки разницы в удобочитаемости, полученные их формулами.
Однако отношения не были идеальными, и было довольно много разногласий.
в частности, были некоторые существенные выбросы. Были случаи,
например, когда некоторые участники высоко оценили читабельность веб-страниц.
где алгоритм оценил их как довольно низкие, и наоборот.

Ссылки

  • Холл, Р. Х. и Ханна, П. (2003). Эффект текстового фона веб-страницы
    сочетания цветов на удержание и воспринимаемую читабельность, эстетику и
    поведенческое намерение. Материалы Американской конференции по информации
    Системы (AMCIS)
    , 2149-2156.
  • Нильсон, Дж. (2000). Проектирование веб-юзабилити: Практика простоты.
    Индианаполис: Новые Райдеры.
  • Ридпат, К. , Тревиранус, Дж., и Вайс, П.Л. (2003). Тестирование читабельности
    цветов веб-страницы. Подсказка веб-сайта . http://www.aprompt.ca/WebPageColors.html

Какое сочетание цветов лучше всего подходит для чтения с экрана?

Время чтения – 2 мин.

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

Избегайте использования текстур и узоров в качестве фона для текста, так как они могут затруднить чтение букв или даже сделать их нечитаемыми. Будьте осторожны при комбинировании цветов текста и фона. Контраст между цветом фона и цветом основного текста должен быть не менее 80%.

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

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

Благодаря яркому белому фону ваши зрачки расширяются, что облегчает чтение черного текста на белом фоне. Наличие меньшего зрачка (например, меньшего размера объектива камеры) облегчает фокусировку глаза и уменьшает влияние дефектов рефракции в вашем глазу.

Убедитесь, что цвет и яркость текста должным образом контрастируют с фоном. Текст может выглядеть размытым или ореолом, если между цветом текста и цветом фона недостаточно контраста. Это затрудняет чтение и приводит к усталости глаз.

Черный, серый или белый текст на высококонтрастном цветном фоне часто обеспечивает лучшую читаемость, чем текст в различных хроматических цветах. различные хроматические оттенки.

Текст или символы с тонкими линиями на цветном фоне не должны использоваться в сером цвете, поскольку в тексте или символах будет отображаться цвет дополнения к фоновому цвету.

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

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

Сильно отличающиеся цвета заставляют пользователей часто перефокусировать взгляд, что приводит к визуальному дискомфорту и, в некоторых случаях, к утомлению.

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

Даже если использование цвета не улучшает работу пользователя, используйте цвет для повышения визуальной привлекательности приложения или веб-сайта.