на сером фоне каким цветом написать

Какой цвет текста хорошо выглядит и на черном, а на белом, и на сером фоне?

В общем, нужен цвет для текста, чтобы нормально читался на фоне от белого до черного, преимущественно черного. Что можно подобрать для этой цели (лучше вида #aabbcc)

Что-нибудь типа #3F57D2

Серый с примесью синего

Белый с чёрной обводкой. Ну и чёрный с белой.

Я бы не задавался этим вопросом, но ФайрФокс (гтк2), если владелец сайта явно не указал цвета, берет из ГТК 2 палитры. Если будет использоваться классическая темная тема, с темными фоном и светлыми буквами, то в браузере периодически можно увидеть светлые буквы по белому фону.

Белый с чёрной обводкой. Ну и чёрный с белой.

Сразу видно анимешник =)

Может, нужно какой-нибудь плагин для огнелиса поискать?

Если бы еще в гтк2 можно было это повернуть.

Регулярно это наблюдаю. Цвет фона из css, цвет текста из темы GTK+. Почему-то 90% сайтов не задают цвет текста.

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

Я бы не задавался этим вопросом, но ФайрФокс (гтк2), если владелец сайта явно не указал цвета, берет из ГТК 2 палитры.

Используй какой-нить плагин типа stylish. И укажи там такую беду: https://css-tricks.com/adding-stroke-to-web-text/

Я бы не задавался этим вопросом, но ФайрФокс (гтк2), если владелец сайта явно не указал цвета, берет из ГТК 2 палитры. Если будет использоваться классическая темная тема, с темными фоном и светлыми буквами, то в браузере периодически можно увидеть светлые буквы по белому фону.

Как сделать фикс, я описал здесь, правда цвета на скорую руку подбирались.

Наверняка есть более профессиональные цветовые подходы.

Там читерство с text-shadow

Это проблемы говноверстальщиков.

сделай OR/XOR на цвет каждой буквы в отдельности, чтобы шрифт точно соответствовал бэкграунду

Это ФФ заимствует для веба цвета из темок, сам по себе бредовый подход.

invy

Avial

Попробую, потом спрошу)

Анимешники говорят, что белый в чёрной рамке.

Никакой. Белый это металлический цвет, а черный — эмалевый.

Это самый нормальный подход. Дефолтные значения по твоему откуда брать?

Он так же заимствует шрифты, селекты, чекбоксы, радиобатоны, батоны, скроллы и прочее ИЗ СИСТЕМНОГО ГУЯ! Если бы это было не так, то на каждом сайте были бы свои элементы форм и прочее.

Пффф! Это еще от гарнитуры и размера зависит, от того, будет это печататься или это на монитор.

Куда это надо-то? Что за странное требование?

Да, на сером приятно читать. =)

Раньше говорили «разбирается в типографии», а теперь «анимешник».

О, а вот и выворотка подъехала!

Ну, может быть типа #ea9a0f.
Но на сером все равно будет провал читаемости.

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

Думаю мелкими подстройкамим ожно добиться компромиса 🙂

Согласен, но их почему-то большинство.

Не, раньше смотрел сериалы с субтитрами.

Он так же заимствует шрифты, селекты, чекбоксы, радиобатоны, батоны, скроллы и прочее ИЗ СИСТЕМНОГО ГУЯ!

А если и офисы буду заимствовать цветовую палитру? Как часто ты указываешь, что для бумаги (фона) надо использовать белый, а для текста чёрный?

Настройки печати, дядя. А в самом документе XML во все поля, в котором указаны все возможные и не возможные цвета и формы.

Ну значит проблемы большинства говноверстальщиков ))

А что тут убеждать? В css-фреймворках взрослые дяди все эти детские проблемы предусмотрели.

Если какой-то фрилансер-юноша научился сайтики клепать, то совсем не значит, что он получил корректное образование по этому профилю.

А заказчикам почти на халяву и уксус сладкий. Чего стоит только фраза «Главное чтоб у начальника на компе все красиво было». Так и сдают.

Источник

Цвет текста и фона: какой выбрать?

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

А вы знали, что использование черного цвета на сайте усложняет читабельность?

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

17 инструментов для генерации цветовых палитр. Инструменты, которые помогут вам подобрать правильные цвета для сайта.

Правила юзабилити

Правило юзабилити №1: Темно-серый текст на белом фоне

Чтение черного текста на белом фоне на сайте в течение долгого времени вызывает напряжение глаз. С чем это связано? Белый цвет имеет 100% цветовую яркость, а черный цвет — 0%. Такой контраст цвета заставляет глаза сильнее напрягаться.

Рассмотрим пример из жизни. В темной комнате вдруг загорается яркий свет. Такое резкое изменение условий освещения вредит глазам. Но если вы включите тусклый свет, то глаза легче адаптируются к изменениям. Нету такого резкого контраста для глаз.

Рекомендации для цвета

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

Оттенков темного-серого довольно много. Но наиболее оптимальный цвет для сайта — #444444.

Высокая контрастность: черный цвет на белом фоне — больше подходит для слабовидящих. Если среди них есть ваша целевая аудитория, то следует создать отдельную версию сайта для людей с плохим зрением. Но для широкой аудитории лучше использовать темно-серый.

Правило юзабилити №2: Белый текст на темно-сером фоне

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

В случае комбинации: белый текст на черном фоне — лучше работает темно-серый фон для сайта. На таком фоне посетителям будет легче читать контент.

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

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

Взгляните на ваш сайт. Нет ли там место для улучшений юзабилити?

Источник

8 ноября 2016 | Опубликовано в статьюшечки | 2 Комментариев »

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

Проблемы светло-серого текста

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

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

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

46% яркости

Мало просто понимать, что слишком светло-серый текст сложен в прочтении. Важно знать какой серый слишком светлый. Без конкретных ориентиров «слишком светлый» — понятие относительное.

У серого же цвета нет параметра насыщенности, а есть только яркость. Чем выше яркость, тем светлее серый цвет. Яркость задается в процентах.

Если применит вышеупомянутые пропорции к серому тексту на белом фоне, то получится что серый текст нельзя делать ярче чем 46% (#767676). Это максимальная яркость текста, которую вы можете себе позволить в рамках комфортной для глаза контрастности. Цифра для обратной ситуации также верна. То есть, если вы используете белый цвет на сером фоне, фон должен быть не ярче 46%.

58% яркости для шрифта 18+

Это не ограничение по возрасту, а размер шрифта. Если он больше 18 pt, вы можете сделать его светлее. Все потому, что большой текст проще читать. Ваш серый текст на белом фоне не должен быть ярче 58% (#949494). Более светлый серый сделает сложно читаемой даже текст большого размера.

Порог для светло-серого фона

Вышеуказанные рекомендации и ограничения относились к тексту на белом фоне. Если вы размещаете текст на светло-сером фоне, вы должны сделать текст темнее. Светло-серый цвет для фона не менее 90% (#E6E6E6). Это значит, что в пересчете на коэффициент 4.5:1 мы получим текст яркостью не более 40% (#666666). Для текста 18+ это цифра растет до 50% (#7F7F7F). Яркость вашего текста в этом случае не должна выходить за указанные рамки.

Что значит «слишком светлый»

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

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

Источник

LiveInternetLiveInternet

—Рубрики

—Приложения

—Музыка

—Всегда под рукой

—Поиск по дневнику

—Подписка по e-mail

—Статистика

сочетание цвета фона и шрифта

Таблица для наглядности:

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

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

Желтый — общительность, коммуникабельность и открытость
Это цвет уравновешенности и внутренней гармонии, он хорошо запоминается и воспринимается жизнерадостными активными людьми. Цвет активизирует развитие, и деятельность мысли, не зря одно из направлений подачи информации назвали «желтой прессой», так как она дает длительное обсуждение её информации. Желтый цвет шрифта по контрастности хорошо сочетается с черным, синим, зеленым и красным фоном, а фон с черным, синим, зеленым и красным цветами шрифта. Влияние желтого шрифта на пользователя при различных цветах фона:
черный фон — третьестепенная информация и заключение;
зеленый фон — мягкая информация о небольших возможных проблемах;
синий фон — убедительное формирование подробной сути деловой информации.

Зеленый — снятие нервного напряжения и остроты переживания
Это цвет успокоения, уменьшения болевых ощущений и усталости, формирования уравновешенности. Ассоциации вызываемые цветом это свежесть и естественность. Зеленый шрифт по контрастности хорошо сочетается с желтым и белым фоном, а фон с желтым и белым шрифтом. Влияние зеленого шрифта на пользователя при различных цветах фонах:
белый фон — привлечение внимания к приятной информации;
желтый фон — отображение неприятной информации;
синий фон — запоминание сути деловой информации.

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

Красный — напряженность, внимание, действие
Это цвет притягивающий внимание. Красный шрифт хорошо сочетается с черным, голубым, желтым и белым цветом фона, а красный фон с черным, белым и желтым цветом шрифта. Влияние красного шрифта на пользователя при различных цветах фона:
белый фон — выделение важной информации;
черный фон — скука;
желтый фон — объединение пользователей;
голубой фон — стремление новых пользователей к объединению.

Почему-то ничего не написано о черном цвете. Вот нашла кое-что:

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

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

Удачи в подборе цветов для фона и шрифта!

Источник

Текст низкой контрастности — веяние моды или убийца юзабилити

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

Очевидно, дизайнеры Squarespace.com «намекают» пользователям, что нужно нажать контрастную кнопку «Get Started» в верхнем правом углу. Но хотят ли они, чтобы потенциальные клиенты прочли информацию на странице? Ведь перед стартом неплохо бы узнать, что именно начинаешь.

Контраст фона и текста в данном случае практически отсутствует. А серые буквы на сером светло-сером фоне вызывают ощущение безразличия.

Почему низкая контрастность вредит юзабилити?

1. Страдает четкость

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

2. Теряется доверие

Исследования показывают, что люди менее доверчивы к тексту, который сложно прочитать (по аналогии с мелким шрифтом под звездочкой).

3. Сложнее найти нужное

Элемент с низкой контрастностью «сливается» с фоном страницы, а значит, ваш потенциальный клиент может просто не заметить его.

4. Пользователи теряют уверенность

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

5. Использование сайта с мобильных устройств становится еще сложнее

Представьте себе: вы пытаетесь прочитать на экране смартфона серый текст на светло-сером фоне во время прогулки под ярким солнцем. Даже с контрастным текстом это затруднительно. В данном случае — практически невозможно.

6. Доступность сайта для пользователей с ослабленным зрением сводится к нулю

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

Можете ли вы сказать, на какой странице сейчас находится пользователь? На текущее местоположение (в данном случае, раздел «Support») на сайте Apple.com намекает «подсказка»: темно-серая подсветка светло-серого текста. Использование низкой контрастности в таком случае может вызывать серьезные затруднения у пользователей.

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

Зачем дизайнеры используют низкую контрастность текста?

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

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

На сайте Quartz.com навигация в левом столбце выглядит хорошо читабельной и контрастной. Но при наведении курсора мыши на нужный раздел ячейка затемняется, и ситуация меняется до неузнаваемости. Текст, в котором пользователь максимально заинтересован, становится чрезвычайно трудно прочитать.

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

Стратегии выделения элементов дизайна без ущерба для юзабилити

1. Сократите объем информации

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

2. Найдите оптимальный размер шрифта

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

3. Проверьте цветовые сочетания

Заголовок, текст, фон не должны «сливаться». Отрегулируйте оттенки таким образом, чтобы элементы можно было распознать, не вглядываясь и не напрягая глаз.

4. Измените расположение элементов

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

5. Будьте осторожны с раскрывающимся меню

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

Вместо заключения

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

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

Источник