Стаття
Витягнення доступної кольорової палітри із зображення
Фотографія або брендовий актив часто містить основу для повноцінної кольорової системи. Витягнення цієї основи, формування з неї придатної палітри та перевірка її відповідності стандартам доступності вимагають трьох окремих кроків. Ця стаття охоплює кожен з них по порядку: як працює витягнення палітри всередині, як відбирати та коригувати кольори для практичного використання, як перевіряти контраст відповідно до порогів WCAG та як виявляти пари, що зливаються для користувачів з колірною сліпотою.
Як витягується палітра: вибірка пікселів та квантизація кольорів
Кожне цифрове зображення є сіткою пікселів, кожен з яких несе значення кольору в просторі, такому як RGB. Витягувач палітри не перевіряє кожен піксель окремо: фотографія на 2 мегапікселі містить 2 мільйони точок даних, обробка яких була б повільною і повертала б тисячі трохи різних відтінків, а не корисний набір. Натомість інструмент вибирає пікселі через регулярні інтервали, збираючи репрезентативну підмножину. Ця підмножина потім подається до алгоритму квантизації кольорів. Найпоширеніший підхід групує схожі кольори за допомогою методу кластеризації, іноді званого розбиттям на медіанний відріз або k-means. Алгоритм розміщує кожен вибраний піксель в один з фіксованої кількості блоків залежно від подібності кольору, потім обчислює середній колір кожного блоку. Результатом є невеликий список, зазвичай з 4 до 16 кольорів, які разом відображають домінуючі візуальні тони зображення. Кольори, що з'являються лише в невеликих ізольованих областях, можуть бути пропущені, це очікувана поведінка, а не дефект.
Від необроблених домінуючих кольорів до придатної палітри
Необроблений вивід витягувача палітри є списком кольорів, ранжованих за частотою, але частота сама по собі не робить палітру. Фотографія лісу поверне кілька зелених відтінків, що є занадто схожими для використання в інтерфейсі як окремі акценти. Практична робота полягає у відборі та корегуванні. Почніть з ідентифікації одного кольору як основного: того, що є найбільш відмітним і найменш нейтральним. З решти кольорів шукайте не більше двох, що контрастують з основним та між собою. Вони стануть вашими акцентами. Все інше, включаючи знесичені тони, які витягувач часто повертає з тіней і середніх тонів, може служити нейтральними для фонів і рамок. Визначившись із цією грубою структурою, вам майже напевно доведеться скоригувати окремі значення. Інструмент color-converter дозволяє вивчити кожен колір у hex, RGB та HSL. HSL є особливо корисним: ви можете зберегти відтінок постійним і змінювати яскравість або насиченість для створення більш тісної або широкої кольорової сім'ї без виходу з неї.
Перевірка контрасту: пороги WCAG для читабельного тексту
Визначившись з кольорами-кандидатами для тексту та фону, потрібно перевірити, чи є комбінація читабельною. Рекомендації з доступності вебконтенту (WCAG) визначають коефіцієнт контрасту для цієї мети. Коефіцієнт порівнює відносну яскравість двох кольорів: значення 1:1 означає відсутність контрасту (однаковий колір на однаковому кольорі), а 21:1 є максимальним (чорний на білому). WCAG 2.1 рівня AA вимагає коефіцієнту не менше 4,5:1 для тексту тіла нормального розміру та 3:1 для великого тексту (18pt або 14pt жирний). Рівень AAA встановлює вищі пороги 7:1 та 4,5:1 відповідно. Вам не потрібно обчислювати яскравість вручну. Ключове розуміння полягає в тому, що пара кольорів, яка виглядає добре для вас при хорошому освітленні, може виявитися нижче 4,5:1 на екрані, і рекомендація існує саме для цього випадку. Після витягнення та корегування кольорів перевіряйте кожну пару тексту на фоні, яку ви плануєте використовувати. Середньо-сірий, що добре читається на білому, може повністю не пройти перевірку на світло-бежевому фоні з вашої витягнутої палітри.
Колірна сліпота: симуляція того, як пари виглядають для людей із порушеннями
Приблизно 1 з 12 чоловіків та 1 з 200 жінок мають певну форму порушення кольорового зору. Найпоширенішим типом є дейтеранопія (знижена чутливість до зеленого), за нею слідує протанопія (знижена чутливість до червоного). Тританопія (знижена чутливість до синьо-жовтого) є рідшою. Для кожного типу зорова система відображає певні довжини хвиль на той самий колір, що сприймається людьми без порушень як різні. Практична проблема для палітри полягає в тому, що два кольори, які виглядають чітко різними при нормальному зорі, можуть зливатися в один тон для користувача з колірною сліпотою, що робить їх непридатними для передачі відмінностей, наприклад при використанні лише червоного та зеленого для позначення успіху та помилки. Запуск симуляції колірної сліпоти показує, як виглядає палітра при стисненні уражених каналів. Пари, що зливаються в майже ідентичний сірий або коричневий,, це ті, що потрібно переглянути: або збільшіть різницю яскравості між ними, щоб контраст зберігався навіть без відмінності відтінку, або додайте вторинну підказку (форму, мітку, візерунок), щоб колір не був єдиним сигналом.
Локальна робота: color-palette, color-blindness та color-converter
Усі три кроки, описані в цій статті, можна виконати без надсилання вашого зображення або брендових кольорів на будь-який сервер. Інструмент color-palette працює повністю у браузері: ви кидаєте зображення, він локально вибирає пікселі та повертає домінуючі кольори у вигляді hex-значень. Жоден файл не передається. Інструмент color-converter приймає hex-код і показує той самий колір у RGB та HSL, щоб ви могли вносити цілеспрямовані корективи яскравості або насиченості, залишаючись у тій самій кольоровій сім'ї. Як hex, так і конвертовані значення існують лише на сторінці. Інструмент color-blindness працює навпаки: ви скидаєте зображення, і він рендерить симуляції дейтеранопії, протанопії та тританопії цього зображення, обчислені у браузері. Щоб перевірити палітру, а не фото, спершу експортуйте або зробіть знімок екрана своїх зразків кольору як зображення, а потім скиньте його в симулятор. Використання трьох інструментів послідовно: витягнення із зображення, корегування в color-converter, потім експорт зображення зі зразками і перевірка в color-blindness, охоплює весь описаний вище робочий процес. Ваше зображення залишається на вашому пристрої протягом усього процесу, що важливо, якщо вихідна фотографія містить неопублікований брендинг або нерозкриту ідентичність клієнта.
Інструменти з цієї статті
- Витягувач колірної палітриВитягуйте домінантні кольори із зображення як зразки HEX. Копіюйте будь-який колір. Без завантаження.
- Симулятор дальтонізмуСимулюйте протанопію, дейтеранопію, тританопію та ахроматопсію на зображенні. Без завантаження.
- Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV та CMYK. Включено перевірку контрасту WCAG. Без завантаження.
- Генератор колірних схемГенеруйте комплементарні, аналогові, тріадні, тетрадні та монохроматичні палітри з базового кольору. Без завантаження.
Поширені запитання
Скільки кольорів зазвичай повертає витягувач палітри?
Більшість інструментів повертають від 5 до 16 кольорів за замовчуванням, хоча багато дозволяють встановити кількість. Повернення меншої кількості кольорів означає, що алгоритм повинен групувати більше пікселів разом, що може об'єднати різні, але схожі тони. Повернення більшої кількості кольорів може призводити до майже однакових результатів, які важко використовувати окремо. Для палітри інтерфейсу 6-8 кольорів зазвичай є практичною відправною точкою.
Чи може палітра, витягнута із зображення, автоматично пройти перевірку контрасту WCAG?
Не автоматично. Домінуючі кольори на фотографії часто є середніми тонами з помірною яскравістю, які, як правило, дають коефіцієнти в діапазоні 2:1-3:1 відносно один одного. Досягнення порогу 4,5:1 для тексту тіла зазвичай вимагає освітлення фонових значень або затемнення текстових значень понад те, що надає необроблена екстракція. Витягнення дає вам відправну точку; перевірка контрасту показує, яке корегування потрібне.
Чи враховує коефіцієнт контрасту WCAG колірну сліпоту?
Частково. Формула яскравості WCAG заснована на відносній яскравості, а не на відтінку, тому пара з високим контрастом, що відповідає рівню 4,5:1, зазвичай залишатиметься відмінною навіть для людей з колірною сліпотою, оскільки різниця яскравості зберігається. Однак два кольори зі схожою яскравістю, але різними відтінками, наприклад червоний та зелений при однаковій яскравості, можуть пройти перевірку контрасту на основі яскравості, залишаючись при цьому нерозрізнюваними для людей з дейтеранопією. Запуск симуляції колірної сліпоти є правильним способом окремої перевірки диференціації на рівні відтінку від коефіцієнта контрасту.