Кольори, які лишаються читабельними

У акцентного кольору одна робота

Акцентний колір позначає те, на що ви хочете, щоб натиснули. У цьому вся його функція. Він працює саме тому, що рідкісний на сторінці: один яскравий елемент серед спокійних читається як відповідь на питання, з яким відвідувач прийшов, і око знаходить його раніше за все інше. Рідкість і є його сила.

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

Текст поверх фотографії

Фотографія — це не тло. Це сотні різних тл одразу, і ваш текст лежить на всіх них водночас. Ім’я, яке чудово читається на темній куртці, зникає там, де починається небо, а версія, яку ви перевірили на своєму екрані, була вдалим кадруванням.

Лікується це затемнювальним шаром між картинкою і текстом, а не жирнішим шрифтом. Жирні літери на строкатій фотографії лишаються на строкатій фотографії: штрихи стають товщими, але шум за ними нікуди не дівається. Темна вуаль поверх усього зображення стискає діапазон під собою, і будь-яка ділянка картинки стає тим, на чому текст може лежати. У tapmy.link у цього шару є повзунок саме тому: ви піднімаєте затемнення до моменту, коли читати комфортно, і фотографія на цьому значенні все ще видна.

Контраст без термінів

Забудьте про цифри. Контраст — це різниця у світлості між текстом і тим, що за ним, а провали завжди однакової форми: сірий текст середньої світлості на світло-сірому блоці, блідий відтінок на білому, біле на кольорі, який виявився світлішим, ніж здавався. Якщо вам доводиться нахилятися до екрана, нахилятися доведеться й іншим, а більшість просто не стане. Перевіряти при цьому варто на тому екрані, що у відвідувача, а не на вашому настільному.

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

• Примружтеся: якщо підпис зливається зі своєю кнопкою, пара не працює.
• Зробіть знімок екрана і знебарвте його — різниця в кольорі зникне, різниця у світлості лишиться.
• Перевіряйте спершу найдрібніший текст, а не заголовок: дрібний відвалюється першим.
• Дивіться на сторінку, якої не торкалися місяцями, а не лише на свіжий блок.
• Попросіть прочитати її людину за сорок, на витягнутій руці й нічого не налаштовуючи.

Фірмові кольори, які не працюють тлом

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

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

Колір сам по собі не підпис

Усе, що ви повідомляєте самим лише кольором, невидиме для частини аудиторії. Зелена кнопка «є в наявності» і червона «продано» — це та сама кнопка для людини, яка не розділяє ці відтінки, а дві найчастіші форми дальтонізму зачіпають саме цю пару. Те саме справедливо для блідої заливки, що позначає, які позиції нові.

Лікується це дешево: додайте слово. Напис «продано» в самому рядку коштує семи символів і працює для всіх, за будь-якого світла, включно з відвідувачем, у якого на екрані теплий нічний фільтр. Колір може підсилювати зміст, але він не має бути єдиним, хто цей зміст несе. Слово до того ж переживе зміну шаблону, а колір — не обов’язково.