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

Дальтонізм

Близько 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 = [(B1 — B2) / B1] x 100

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

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

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

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

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

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

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

P.P.S.

Contrast-ratio.com — інструмент для перевірки контрасту для екранів.

P.P.P.S.

На основі розрахунків ми зробили сайт для порівняння кольорів по LRV (у тестовому режимі) — http://color.a3.kyiv.ua

--

--

Робимо зрозумілий, корисний та доступний простір. http://a3.kyiv.ua

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Агенти змін

Агенти змін

Робимо зрозумілий, корисний та доступний простір. http://a3.kyiv.ua