Контрастність, шрифти і структура: дизайн, що працює для всіх
Зручний дизайн текстів і просторів — одна з основ інформаційної безбар’єрності. Контрастність кольорів, читабельний шрифт і логічна структура допомагають зробити інформацію доступною для будь-кого.
Кольори: контраст, комфорт, увага до сприйняття
Люди сприймають кольори по-різному. Для когось — занадто яскравий фон викликає втому. Для когось — комбінація червоного і зеленого виглядає як суцільна сіра пляма.
Щоб зробити дизайн справді доступним:
- Забезпечуйте достатній контраст між фоном і текстом (перевірити це можна через WebAIM Contrast Checker).
- Уникайте поєднань із близькою світлотою — наприклад, жовтий на білому або світло-сірий на блакитному.
- Обережно з червоно-зеленими і синьо-жовтими комбінаціями — для людей з дальтонізмом вони можуть бути нерозпізнаваними.
- Для акцентів використовуйте насичені кольори, але не робіть ними весь текст або велику площу фону.
- Пастельні кольори — м’ятний, бежевий, пудровий — створюють спокій, але потребують контрастного шрифту.
Шрифт: чіткий, простий, без прикрас
Не всі шрифти однаково читабельні. Людям із порушеннями зору або когнітивними особливостями складно сприймати декоративні або стислі шрифти.
Вдалий шрифт:
- без зарубок (sans-serif), наприклад Arial, Verdana, Tahoma;
- не курсив і не розрядка;
- достатній розмір — мінімум 14 pt для друку, 16 px для вебу;
- міжрядковий інтервал — не менше 1.5 для довгих текстів;
- Не використовуй текст усього ВЕЛИКИМИ ЛІТЕРАМИ для основного змісту — це важко сприймати;
- жирний шрифт використовуй для виділення, а не для всього тексту.
Використання шрифтів, розроблених спеціально для людей із дислексією (наприклад, OpenDyslexic), також може бути корисним.
Докладно про шрифти — в інструкції «Як зробити текст доступним» на BBU.
Структура: орієнтуйся з першого погляду
Зрозуміла структура допомагає читачу не «загубитися» у тексті. Це важливо для всіх, особливо для людей з аутизмом, когнітивними порушеннями, розладами уваги.
Добра структура виглядає так:
- Заголовки і підзаголовки: кожен розділ варто починати з короткого заголовка, який одразу презентує суть абзацу.
- Списки і маркери: структурована інформація сприймається легше і дозволяє швидше знайти відповідь на запитання.
- Один абзац — одна думка: це знижує когнітивне навантаження й допомагає зорієнтуватися у тексті.
- Підкреслення виняткових слів або фрагментів — дуже обережно, бо підкреслення асоціюється з гіперпосиланням в інтернеті.
- Візуальне розділення блоків: пробіли, різне тло для важливої інформації, іконки навігації.
- Послідовність інформації: спочатку головне, потім деталі.
Це також про цифрову безбар’єрність, адже правильна HTML-структура дає змогу користувачам екранних зчитувачів орієнтуватися у контенті. Докладніше — в розділі «Цифрова безбар’єрність».
Не лише на екрані: дизайн друкованих матеріалів
Плакати, брошури, вказівники у громадських місцях — усе це також має бути зручним для сприйняття:
- текст на рівні очей — не надто високо і не на підлозі;
- великий шрифт (18–24 pt), якщо матеріал розміщено в публічному просторі;
- достатньо простору довкола тексту — не тісно;
- піктограми або ілюстрації — тільки в супроводі тексту (і навпаки);
- матове покриття, без бликів;
- навігаційні елементи — логічні, не перевантажені, розміщені послідовно.
Практичні поради й інструменти
- Перевіряй контрастність за допомогою онлайн-калькуляторів:
- Регулярно тестуй тексти: чи легко їх побачити, прочитати й зрозуміти на різних пристроях (смартфон, ноутбук, роздруківка).
- Попроси кількох людей з різним досвідом оцінити читабельність тексту або навігацію сайту.
- Орієнтуйся на потреби найширшої аудиторії: краще зробити простіше, ніж перевантажити візуальними ефектами.
Чому це важливо?
- Людина бачить, читає, орієнтується, розуміє і діє.
- Людина не потребує сторонньої допомоги.
- Це про гідність, комфорт і право бути частиною суспільства.