Як правильно підбирати контрастні кольори для інформації на зображеннях – Громадський холдинг "ГРУПА ВПЛИВУ"
Skip navigation

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

Згідно з вебстандартами Дабл ю сі ей джі (веб контент аксесабіліті гуднес — Web Content Accessibility Guidelines, WCAG), мінімальна рекомендована пропорція для тексту загального використання складає 4.5:1, тоді як для заголовків і більшого тексту, використовуваного на позначення важливих елементів, рекомендована пропорція 3:1. Проте з огляду на те, що кількість осіб із порушеннями зору невпинно зростає, а різні пристрої дають різний ефект під час відтворення кольорів, найкраще використовувати пропорцію 7:1.

Найпростіше визначення контрасту — міра виявлення й розпізнавання об’єкта на будь-якому тлі. Виділяють кілька функцій контрастності:

  1. Виділення важливих елементів і створення ієрархії інформації.
  2. Керування увагою та краще розуміння структури матеріалу.

Про що важливо пам’ятати, підбираючи контраст?

  1. Акцентувати на одному-двох важливих елементах. Наприклад, якщо в інфографіці перелік кроків, щоб отримати певну послугу, та пояснення до кожного кроку, то не потрібно все виділяти окремим кольором. Можна виділити кожен крок одним кольором, відмінним від кольору основного тексту, щоб читачам було зрозуміло, скільки дій потрібно зробити.
  2. Якщо потрібно підкреслити полярність думок чи певну розбіжність, варто обирати кольори, що контрастують між собою та з фоном. Наприклад, обираючи червоний і зелений, зробіть їх яскравими. Проте пам’ятайте, що неонові відтінки не лише подразнюють зір, а й погано відрізняються від тла.
  3. Не оформляти все в одній колірній гамі. Різні відтінки одного кольору виглядають стильно. Проте часто саме це заважає сприймати важливу інформацію. Крім того, через порушення сприйняття певного кольору людина може не помічати різницю між відтінками.

Ідеальна формула контрасту: світлий теплий — темний холодний або світлий холодний — темний теплий.

Теплі кольори: червоний, жовтий, помаранчевий і всі похідні від них.

Холодні кольори: синій, блакитний, зелений, синьо-фіолетовий, синьо-зелений і кольори, які можна отримати від їхнього змішування. 

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

Ресурс для перевірки контрастності: https://paletter.beloweb.name/contrast-checker/ 

Використання білого кольору

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

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

Неонові (флуоресцентні) відтінки

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

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

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