Як проєктувати палітри, дружні до дальтоніків

Уперше я по-справжньому зрозумів дальтонізм не зі специфікації — а з код-рев'ю. Я зробив дашборд статусів, де зелені крапки означали «справний», а червоні — «лежить», і бекенд-інженер у команді згадав, майже вибачаючись, що не може сказати, які сервери палають. Він — один із приблизно одного з дванадцяти чоловіків із червоно-зеленим порушенням колірного зору. Моя прекрасна система світлофора для нього була сіткою однакових буро-сірих кружечків. У коді нічого не було зламано. Усе було зламано в дизайні.

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

Наскільки це поширено і що насправді ламається

Порушення колірного зору (CVD) зачіпає близько 8% чоловіків і 0,5% жінок північноєвропейського походження — приблизно 1 з 12 чоловіків і 1 з 200 жінок. На продукті з будь-якою реальною аудиторією це не граничний випадок. Це ціла колонка у вашій аналітиці.

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

• Дейтераномалія та дейтеранопія — знижена або відсутня реакція зелених колбочок. Це головний випадок: сама лише дейтераномалія зачіпає близько 5% чоловіків, що робить її найпоширенішою окремою формою. Червоні, зелені, коричневі й помаранчеві зливаються в одне.
• Протаномалія та протанопія — знижена або відсутня реакція червоних колбочок, близько 1% чоловіків для повної форми. Подібна червоно-зелена плутанина, але червоні до того ж виглядають темнішими й можуть зникати на чорному тлі.
• Тританопія та тританомалія — синьо-жовтий дефіцит. По-справжньому рідкісний (порядку 0,01% і не зчеплений зі статтю, тож зачіпає чоловіків і жінок приблизно однаково), але вартий уваги, бо ламає синьо-зелену й жовто-рожеву різниці, яких інші типи не чіпають.

Практична головна теза: близько 99% CVD — це червоно-зелений. Якщо ваша палітра витримує червоно-зелену симуляцію, ви охопили переважну більшість постраждалих користувачів. Саме туди варто спрямувати увагу насамперед.

Це інша задача, ніж контраст

Ось різниця, на якій спотикаються навіть уважні команди. Контраст за яскравістю (той, що в WCAG) стосується світлого проти темного — чи можна прочитати текст. Порушення колірного зору стосується плутанини відтінків — чи можна розрізнити два кольори, коли вони випадково схожі за світлістю. Це незалежні задачі, і можна провалити одну, блискуче впоравшись із іншою.

Класичний приклад: чистий червоний #FF0000 текст на чистому зеленому #008000 має контраст за яскравістю приблизно 1.3:1, що грубо провалює WCAG — але навіть якби ви «полагодили» контраст, дейтераноп усе одно мав би труднощі, бо самі ці два відтінки зливаються докупи. І навпаки, два кольори можуть мати чудовий контраст і все одно бути пасткою для CVD, якщо ви використовуєте їхній відтінок, і лише відтінок, щоб нести зміст.

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

Одне правило, що виправляє більшість проблем: ніколи не покладайтеся лише на колір

Якщо ви візьмете з цієї статті єдиний принцип, візьміть оцей: не покладайтеся лише на колір для передавання інформації. W3C робить це явною вимогою — Критерій успіху WCAG 1.4.1, Використання кольору — і це звичка з найбільшим важелем, яку ви можете виробити.

Виправлення майже завжди — надлишковість. Щоразу, коли колір несе зміст, поєднуйте його з другим, не-кольоровим сигналом:

• Текст або підписи. Мій дашборд серверів покращився тієї ж миті, коли кожна крапка ще й сказала «Up» або «Down». Нудно, куленепробивно.
• Іконки та форми. Галочка, хрестик, трикутник попередження. Стани помилок отримують іншу іконку, а не лише інший колір. Саме тому хороша форма показує червону рамку і іконку помилки і повідомлення.
• Патерни й текстури. На графіках заповнюйте стовпці чи області штрихуванням, крапками чи пунктиром, щоб категорії відрізнялися навіть у градаціях сірого.
• Позиція й порядок. Легенда, що йде в тому самому порядку згори вниз, що й стосові області, які вона описує, дозволяє людям зіставляти за позицією, а не за відтінком.

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

Вибір відтінків, що витримують CVD

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

Кілька практичних правил із окопів:

• Уникайте червоно-зеленого як єдиного контрасту. Поєднання «добре/погано», «до/після», «команда А/команда Б», яке за замовчуванням стає червоним і зеленим, — найпоширеніший окремий збій CVD. Якщо вам потрібні два протиставлені кольори, синій і помаранчевий — найбезпечніша пара на планеті: вона лишається відмінною за будь-якого типу CVD. Синій і червоний — надійний другий вибір.
• Спирайтеся на різницю світлості, а не лише на відтінок. Якщо дві категорії ще й відрізняються за яскравістю, глядачі з CVD можуть розрізнити їх навіть тоді, коли відтінки зливаються. Світло-синій на тлі темно-синього читається як дві речі для всіх.
• Будьте обережні з проміжними відтінками. Бірюзовий, оливковий, коричневий і брудно-помаранчеві сидять прямо в небезпечній зоні для червоно-зеленого дефіциту. Чисті, розділені відтінки тримаються краще, ніж каламутні.

Замість того щоб винаходити це заново, станьте на плечі людей, які розв'язали це строго. Палітра Окабе-Іто (також звана палітрою Вонга, за статтею Банга Вонга 2011 року в Nature Methods) — це набір із восьми кольорів, спроєктований так, щоб лишатися розрізнюваним за всіх поширених типів CVD. Hex-коди варто додати в закладки: помаранчевий #E69F00, небесно-блакитний #56B4E9, синювато-зелений #009E73, жовтий #F0E442, синій #0072B2, вермільйон #D55E00, червонувато-фіолетовий #CC79A7 і чорний #000000. Я використовував її як категоріальну палітру для більшої кількості дашбордів, ніж можу порахувати, і вона жодного разу не провалила симуляцію.

Коли ви будуєте палітру бренду чи UI, а не графік, вам зазвичай не потрібні вісім CVD-розрізнюваних кольорів — вам потрібна пара акцентів, що не зіткнуться. Ось де генератор колірної палітри заслуговує свого місця: побудуйте гармонію (спліт-комплементарну чи тріадну схему), зчитайте значення HSL, а потім свідомо розведіть два найважливіші за змістом кольори в світлості, а не лише у відтінку. Зчитування HSL робить це легким — опустіть світлість в одному, підніміть в іншому, і ви купили собі розділення, що витримує CVD. Якщо ви хочете зрозуміти, чому певні відношення на колі конфліктують більше за інші, Спліт-комплементарні проти тріадних палітр заглиблюється в геометрію.

Тестуйте — не довіряйте власним очам

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

• Coblis (симулятор дальтонізму на Colblindor) дозволяє завантажити скріншот і подивитися на нього крізь вісім різних типів порушень. Усе працює локально у вашому браузері, тож можна кидати в нього повнорозмірні експорти. Це мій основний інструмент для перевірки готового екрана.
• DevTools браузера. Панель Rendering у Chrome має випадний список «Emulate vision deficiencies» — протанопія, дейтеранопія, тританопія й розмитий зір — застосований наживо до реальної сторінки. Чудово підходить, щоб ловити проблеми, поки ви ще в розмітці.
• Плагіни Figma й Sketch, як-от Stark або вбудовані симулятори зору, дозволяють перевірити макети ще до того, як їх збудують.

Мій реальний робочий процес: проєктую як зазвичай, потім проганяю ключові екрани — дашборди, графіки, помилки форм, усе, де колір щось означає, — крізь дейтеранопію першою (найпоширеніша), потім протанопію, потім швидкий прохід тританопії. Дев'яносто відсотків проблем, які я знаходжу, — у тому першому вигляді дейтеранопії. Виправте їх — і ви допоможете найбільшій кількості людей за найменших зусиль.

Помилки, які я бачу знову й знову

• Червоно-зелені стани валідації без іконки. Найпоширеніша. Червона рамка й зелена рамка — це та сама рамка для мільйонів користувачів. Завжди додавайте іконку й повідомлення.
• Теплові карти й графіки, що варіюють лише відтінок. Зелено-червона теплова карта — це мінне поле CVD. Використовуйте послідовну шкалу, що ще й змінює світлість (скажімо, світло-жовтий до темно-синього), або додавайте підписи значень.
• Кольорово-кодовані легенди, зіставлені лише за кольором. Якщо єдиний спосіб зіставити лінію з її підписом — «знайти зелену», користувачі з CVD у глухому куті. Упорядкуйте легенду відповідно до даних або підписуйте прямо на лінії.
• Припущення, що «воно пройшло WCAG» означає «воно доступне». Контраст і CVD — це різні осі. Палітра може скрізь подолати 4.5:1 і все одно перетворитися на кашу при дейтеранопії. Тестуйте обидва.
• Проєктування лише на власному ідеальному моніторі. Та сама сліпа пляма, що ховає проблеми контрасту, ховає й проблеми CVD. Симулюйте, щоразу.

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