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

Дякую всім (включаючи відповідачів)! Я лише двічі перевірив 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 є (коротко!) Оптичною ілюзією, яка викликає у глядачів проблеми глибинного поля. Це неприємно!

— Mayersdesign
джерело

11

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

— Адріан Маккарті

1

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

— Mayersdesign

8

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

Це може бути корисно, якщо ваш клієнт наполягає на збереженні кольорів.

— Гремль
джерело

Справедливості, це працює лише з типом 36pt.

— user8356

Так, чудова концепція. Не означає як сарказм. І чим більше ви її застосовуєте, тим краще ми можемо прочитати текст. Тому візьміть білі обриси аж до краю екрана ... Підморгніть, підморгніть.

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

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

@Dylan що ви думаєте про jsfiddle.net/bersbers/xdkj76L3

— Берс

2

Його читабельно. Я не думаю, що це гарна ідея. Але це можна прочитати.

— Кодування Happy Hour

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

— yunzen

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

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

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

— всітемікейсаретак
джерело

Як зробити цю комбінацію кольорів більш читаною?

Змініть думку клієнта.