Перевірка дизайну на доступність

5 min readOct 17, 2018

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

Дальтонізм

Близько 8% чоловіків та 0,5% жінок народжуються з одним із видів дальтонізму. Тому будь-які макети треба перевіряти на доступність при кольоровій сліпоті, особливо, коли одночасно використовуються червоний та зелений кольори.

Adobe

У Adobe Photoshop, Illustrator та InDesign є вбудована функція перевірки макетів на два найпоширеніші види кольорової сліпоти: View / Proof Setup / Color Blindness Protanopia та Deuteranopia type. Для комфортної роботи можете додати гарячу клавішу для ввімкнення цих режимів у Edit / Keyboard Shortcuts.

Color Oracle

Якщо не прив’язуватись тільки до програм Adode, можна звернутись до більш універсальної програми — Color Oracle. Є версії для MacOS, Windows та Linux. Вона запускається незалежно від інших програм та переводить у режим перевірки на дальтонізм все, що відображується на екрані.

Sim Daltonism

Окремо для Mac є програма Sim Daltonism.

Sketch + Stark

Для тих, хто проектує інтерфейси у Скетчі, є окремий плагін Stark. Ще плагін вміє порівнювати два кольори на контрастність.

Контраст кольорів

Є такий розповсюджений стереотип: «Усім давно відомо, що жовтий тектс на чорному тлі — максимально доступний та читабельний» (або жовтий на синьому, або будь-яка інша пара кольорів, просто найчастіше згадують жовтий). Але це все маячня, звернемось до науки.

Light Reflectance Value

Light reflectance value (LRV) — здатність поверхні певного кольору відбивати світло. Чим більше LRV, тим більше світла відбиває поверхня, тим яскравіший колір. Читабельність тексту напряму залежить від різниці LRV двох кольорів: тла і тексту. Більша різниця — більший контраст та розпізнаваність (legibility) тексту.

Різниця (P) рахується за формулою:

P = [(B1 — B2) / B1] x 100

де B1 — значення LRV світлого кольору, B2 — темного.

Наприклад, для наших адресних покажчиків LRV синього кольору (RAL 5013) дорівнює 3, а LRV білого — 88. Тому за формулою отримуємо контраст кольорів P = (88−3)/88 × 100% = 97%. І для порівняння розрахуємо різницю чорного та жовтого. Чорний — Traffic Black 9017 з LRV = 2 та найбільш «отрутний» жовтий RAL Sulful Yellow 71, з LRV = 71. Отримаємо P = (71−2)/71 × 100% = 97%. Як бачите різниці по розпізнаваності немає.

Згідно зі стандартом The Americans with Disabilities Act accessibility guidelines (ADAAG) для знаків з піктограмами та текстом рекомендований контраст повинен бути більше ніж 70%. Хоча це не жорстке обмеження, для деяких кольорів 60–70% також працює непогано.

On signage with words or pictograms The Americans with Disabilities Act accessibility guidelines recommend a light reflectance value of 70%, but this is not a strict requirement. Several other color combinations in the 60–70% range also work well.

В Україні доступність регулює стандарт ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища» (ISO 21542 2011, IDT). У стандарті також використовуються розрахунки різниці LRV. Для тексту рекомендована така ж різниця у 70%.

Як розрахувати LRV

Простий калькулятор є у Asi Signage. Але у них замало відтінків і не зовсім ясно, яким реальним кольорам в палітрах RAL чи Pantone вони відповідають.

Приблизні значення LRV для реальних палітр RAL, Pantone та інших можна знайти на сайті e-paint.co-uk.

Ще один приклад від Designworkplan зі зрозумілою матрицею для порівняння основних кольорів.

UPD: інженер Віктор Петрук правильно помітив, що на попередній картинці деякі пари кольорів з низькою різницею контрасту читабельніші за інші пари з більшою різницею. Він порівнює кольори з картинки через яскравість у RGB. Але не коректно порівнювати RBG та LRV. RGB — адитивна колірна модель, яка відтворює зображення за допомогою випромінення світла екрану. LRV — параметр, що описує яскравість світла, яке відбивається від кольорової поверхні (це бльше відноситься до субтрактивної моделі, як CMYK). Це все одно, що порівнювати фінальний вигляд картинки на моніторі та на паперовому носії.

Нюанси сприйняття шрифтів

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

Наприклад, шрифт FS Millbank має дві версії: для світлого тла та для темного (із врахуванням внутрішньої підсвітки знаків).