24

Я пытаюсь улучшить существующий веб-сайт, и вот с чего я начинаю:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

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

Я уже экспериментировал совсем немного с -webkit-text-stroke, text-shadow(см код выше), но , как я могу улучшить вещи на одном дисплее, она становится хуже на другой.

Что еще я могу попытаться сделать это более читабельным на различных дисплеях, сохраняя общую цветовую схему?

color website-design color-theory

— Берс
источник

22

Не стесняйтесь показывать этот комментарий вашему клиенту. У меня есть многолетний опыт проектирования, и я могу заверить вас, что «другие» в вашем вопросе выше, которые думают, что они читабельны, совершенно не правы :) Вся схема должна быть изменена, потому что она сломана и не подлежит ремонту.

— Mayersdesign

15

Я имею более чем 30-летний опыт работы дизайнером ... Я не мог согласиться с комментарием @mayersdesign выше. эта цветовая схема должна быть немедленно отклонена.

— Скотт

6

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

— Happy Hour Coding

Спасибо всем (включая ответчиков)! Я просто дважды проверил SE, чтобы посмотреть, что я ожидал получить 1 или 2 комментария с этого утра, а теперь и это. Я многому научился и получил несколько убедительных аргументов - спасибо!

— Берс

1

1995 год называется. Они хотят вернуть свою цветовую гамму.

— Мазура

54

Изменить мнение клиента.

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

Этот веб-сайт webaim.org показывает, что контраст между вашими двумя цветами жалкий 1.52: 1

Контраст важен для разборчивости

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

Уровень WCAG AA требует контрастности не менее 4,5: 1 для обычного текста и 3: 1 для большого текста, а уровень AAA требует контрастности не менее 7: 1 для обычного текста и 4,5: 1 для большого текста.

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

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

Надеемся, что предоставленные ссылки могут помочь сделать ваше дело более убедительным, чем просто доказывать, что вам трудно его читать. Это на самом деле доказуемо трудно читать.

Chromostereopsis

Если это не было достаточно убедительно, попробуйте это - Chromostereopsis (кратко!) Оптическая иллюзия, которая вызывает проблемы глубины резкости для зрителей. Это неприятно!

— mayersdesign
источник

11

Для пояснения, контрастность в документе W3C является минимальной . Не говорите, что соотношение должно быть между 4,5: 1 или 7: 1; они говорят, что это должен быть хотя бы один из них, в зависимости от того, на какой уровень доступности вы ориентируетесь.

— Эдриан Маккарти

1

Очень хороший момент, я обновил ответ, чтобы включить больше деталей, особенно этот.

— Mayersdesign

8

Хотя отнюдь не идеально (или даже хорошо), добавление белого (или другого) контура к тексту может помочь с удобочитаемостью:

Это может быть полезно, если ваш клиент настаивает на сохранении цветов.

— гремлин
источник

Честно говоря, это работает только с типом 36pt.

— user8356

Да, отличная концепция. Не подразумевается как сарказм. И чем больше вы его применяете, тем лучше мы можем читать текст. Так что возьмите белые контуры до самого края экрана ... Wink, подмигивание.

— Мартин Заске

8

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

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

— user8356
источник

7

Как уже отмечалось, это ужасный цветовой контраст. Это также плохая палитра для людей, страдающих дальтонизмом (с красно-синим дальтонизмом коэффициент контрастности падает почти до 1: 1, что совершенно нечитаемо).

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

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

Используйте моноширинный шрифт. Звучит глупо, но на самом деле это помогает большинству людей легче читать текст. Очевидно, что не Courier New, а Bitstream Vera Sans Mono (или даже что-то вроде Droid Sans Mono) все равно должны выглядеть прилично и будут несколько более читабельными.
Сделайте шрифт весом, и, вероятно, размер тоже немного. Большой, более смелый текст легче читать, независимо от контраста.
Поменяйте местами цветовую гамму (то есть сделайте текст темно-синим на ярко-красном фоне). Звучит просто, но большинству людей легче подготовить темно-синий к ярко-красному цвету, чем наоборот.
Добавьте высококонтрастную узкую тень к тексту со смещением. То, что вы хотите здесь, это не сочетание с фоном, это жесткий край, который обеспечивает хороший контраст. Смещение тени также может помочь в этом, особенно простое смещение по диагонали. Я бы также выбрал черный вместо белого (вы хотите подчеркнуть текст, а не фон, поэтому используйте контраст для текста). В целом, что-то в этом роде, text-shadow: 2px 2px 4px black;вероятно, является достойной отправной точкой.
Осветлите красный значительно. Прямо сейчас вы используете rgb(255,0,0). rgb(255,204,204)Сначала я бы попробовал что-то вроде (или, возможно, даже легче) и отрегулировал бы оттуда.
Темнеют синие. Нечто похожее rgb(25,51,77)примерно такого же оттенка, но должно быть достаточно темным, чтобы сделать текст более читабельным.

Еще одна опция, которая также помогает некоторым с проблемой дальтонизма:

Обесцветить синий фон. Хотя это и не лучший вариант (он несколько искажает цветовую схему), это должно улучшить читаемость из всех перечисленных мною вещей, потому что это будет активно повышать контраст. Я бы попробовал примерно на 30% более низкое насыщение (это rgb(82,102,122)) в качестве отправной точки.

— Остин Хеммелгарн
источник

6

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

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Стили

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

1

Или даже твердый простой белый лучше

— aloisdg говорит Восстановить Монику

1

это все еще трудно читать для меня ..

— Happy Hour Coding

@Dylan что вы думаете о jsfiddle.net/bersbers/xdkj76L3

— Берс

2

Его читабельно. Я не думаю, что это хорошая идея. Но это можно прочитать.

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— юнзен

5

Вам нужно иметь достаточно высокий коэффициент контрастности между фоном и текстом (объект на переднем плане), чтобы он был читабельным, с минимальным коэффициентом контрастности 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance показывает, что фон и передний план расположены слишком близко друг к другу, чтобы их можно было прочитать.

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

— Макс Токман
источник

3

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

Коэффициенты контрастности для ваших цветовых комбинаций можно увидеть здесь ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Эндрю
источник

2

(Недостаточно очков для комментариев)

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

— allthemikeysaretaken
источник

Как сделать эту цветовую комбинацию более удобочитаемой?

Изменить мнение клиента.