Розробляючи веб-сайт, як я можу знати, як користувачі бачать кольори?

11

Розробляючи веб-сайт, як я можу знати, як користувачі бачать кольори? Я бачу, що кольори веб-сайту відрізняються від мого Macbook та робочого столу / ноутбука Windows. Особливо я не бачу світлих кольорів на робочому столі, наприклад, сірі рамки столів невидимі.

На кого я повинен дбати під час проектування? Чи можу я зробити всі екрани подібними до дизайнерського рішення?

website-design color-conversion

— ахмет
джерело

Пов’язаний і можливий дублікат: graphicsdesign.stackexchange.com/questions/94401/…

— Vincent

1

І лише щоб додати плутанину, майже 10% людей є колоритом - але, принаймні, є розширення для Chrome, принаймні, які дозволяють (припускаючи, що ви не) бачити приблизно, як це буде виглядати тому, хто є ...

— Rycochet

... а на рівні підприємства гамма / контраст + інші налаштування екрана можуть бути повсюдно на моніторах в офісі (вашому клієнті), коли їх встановлюють ІТ, які часто використовують дистанційний доступ і групові настройки для управління мережами ПК. У моїй останній компанії ІТ були в іншій країні з малою симпатією до дизайну - я отримав доступ адміністратора та додав власний монітор та налаштування! Робота за стандартами та уникнення крайнощів є найкращим підходом, зазначивши, що деякі клієнти (як уряд) матимуть сувору доступність - попросіть це

— наперед,

23

Коротка відповідь: ви цього не робите.

Більш довга відповідь: буквально неможливо врахувати всі параметри екрана та калібрування, обставини та візуальні (не) можливості глядачів. Ось чому існують вказівки щодо, наприклад, контрастування тексту та його фонових даних, які гарантують деяку зручність у використанні принаймні у більшості випадків.

Мій особистий робочий процес включає щонайменше два калібровані монітори та деякі тестування на різних мобільних пристроях у різних ситуаціях освітлення.

W3C створив деякі рекомендації щодо використання кольору та необхідного контрасту, які ви можете прочитати тут . Особисто я використовую цей інструмент контрасту для тексту Lea Verou, щоб перевірити, чи відповідають мої кольори тексту вказівкам чи принаймні близькі.

— Вінсент
джерело

8

Мені цікаво, чи читають ЮН ці вказівки. У мене досить хороший зір, але контраст між фоном та кольором виділення посилань на багатьох сайтах SE (включаючи цей) поганий.

— Бармар

1

Я б хотів, щоб я міг підтримати це не раз! Я сам користуюся темним розширенням для браузера, тому, яким би гарним не був ваш сайт, я повністю знищу це лише заради того, щоб мати пристойний зір, коли мені виповниться п’ятдесят!

— PieBie

За даними цього веб-сайту, webaim.org/resources/contrastchecker , кольоровий контраст між фоном та посиланнями не відповідає стандартам доступності на цьому веб-сайті SE. Тож, напевно, безпечно припустити, що люди з ІП не читають таких вказівок.

— ESR

2

Ви не можете і не можете контролювати та не застосовувати однакові налаштування на моніторі / пристрої кожного. Найкраще, що ви можете зробити, це використовувати кольоровий профіль sRGB при експорті растрових зображень для Інтернету.

sRGB - це всесвітній стандарт кольорового простору для відтворення кольорів в Інтернеті.

Це допоможе певною мірою, але в кінцевому рахунку власні переваги користувача вирішать, як зображення переглядаються на їх пристрої. Очевидно, що це стосується растрових зображень, а не інших графічних елементів на сторінці.

— Біллі Керр
джерело

І калібруйте свої дисплеї до sRGB, так що принаймні на ваших дисплеях відображається, що це повинно бути

— joojaa

Коментарі не для розширеного обговорення; ця розмова була переміщена до чату .

— Вінсент

1

У сучасних браузерах та комп’ютерах сьогодні рідко виникають проблеми із відображенням правильних кольорів ( детальну інформацію про це див. На https://websafecolors.info/learn ).

Здається, що саме дисплеї можуть зробити кольори різними. Це може бути пов’язано з яскравістю монітора, контрастністю та налаштуваннями рівня синього світла, і навіть завдяки самій технології монітора, такі як світлодіодні та панельні типи. Немає можливості застосувати послідовні налаштування на дисплеях або навіть прочитати їх налаштування та налаштувати веб-сайт.

Я рекомендував би використовувати елемент Inspect Element і переглянути шестигранний код кольорів на кожній платформі. Якщо вони ідентичні, то ви знаєте, що це дисплеї. Рішенням буде використання кольорів з більшою контрастністю один одного, щоб вони мали більший шанс виділитися на всіх екранах. Крім того, спробуйте товсті рамки або навіть облямовані без полів таблиці! Більшість користувачів мають екрани високої чіткості, що відкриває багато можливостей для дизайну столів, який зазвичай використовує текст та форматування в товщі пікселів.

— ЛлойдТао
джерело

0

Відповідь - ні, оскільки колір ноутбука та колір робочого столу не однакові для кожного комп’ютера. Ви можете використовувати колірний код, якщо хочете переконатися, що колір однаковий, наприклад, ви можете ввести цей код у css:

background-color: #D2B48C

— Sally_2891
джерело

2

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

— PieBie

Це не вирішує фактичну проблему. Проблема полягає в тому, що на різних моніторах #D2B48C буде виглядати по-різному, і питання полягає в тому, як це вирішити.

— труба