Веб-студия Laweb

г.Киев, ул. Драгоманова, 4а

Наши Статьи

Делимся своим опытом и размышлениями.

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

ДИЗАЙН

«Агенты перемен» - главные адепты доступного дизайна в Украине. В своем блоге они поделились лайфхак, как проверять и создавать максимально доступный дизайн.

18.12.2018
113

А еще развенчали миф о узнаваемости текста и контраста цветов.

В своей работе мы всегда придерживаемся принципов универсального дизайна, основной из которых - равенство и доступность использования. Поэтому в этой статье опишем, как можно проверять дизайн и цвета на доступность для людей с нарушением зрения.

Дальтонизм

Около 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. Она запускается независимо от других программ и переводит в режим проверки дальтонизмом все, что отображается на экране.

Контраст цветов

Есть такой распространенный стереотип: «Всем давно известно, что желтый текст на черном фоне - максимально доступный и читабельный» (или желтый на синем, или любая другая пара цветов. Но те, кто пишет «всем известно ...» чаще всего вспоминают желтый) . Но это все бред, обратимся к науке.

Light Reflectance Value

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

Нюансы восприятия шрифтов

По расчетам разницы LRV контраст черного на белом и белого на черном может быть одинаковым. Но восприятие шрифтов работает по-разному: белый текст на черном фоне визуально кажется немного жирнее, чем черный на белом.

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

P.S. Еще один ненаучный метод определения контраста цветов

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