// //
Статьи

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

13 февраля, 2018
avatar
Александр Колодько
главный дизайнер в «Агенти змін»
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

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

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

Дальтонізм

Близько 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% також працює непогано.

В Україні доступність регулює стандарт ДСТУ Б 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 має дві версії: для світлого тла та для темного (із врахуванням внутрішньої підсвітки знаків).

Можна це враховувати при підборі шрифтів для проекту.

P.S. Ще один ненауковий метод визначення контрастності кольорів

Переводимо зображення у чорно-білий режим і дивимось контраст яскравості. Більша різниця — краща розпізнаваність.

avatar
Александр Колодько
главный дизайнер в «Агенти змін»
Колонка

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: