Почему доступность — это не компромисс
По данным Национального института здравоохранения США (NIH), около 253 миллионов человек в мире имеют нарушения зрения различной степени. В США более 7 миллионов взрослых имеют серьёзные нарушения зрения, и более 1 миллиона — юридически слепые. Для типографа и дизайнера это означает: каждое решение о размере шрифта, контрасте, межстрочном интервале влияет на возможность реальных людей получить доступ к информации.
Важно понимать: доступность не делает дизайн хуже. Шрифт, хорошо читаемый при нарушениях зрения, как правило, лучше читается всеми. Большой контраст делает текст ярче и чище. Достаточный межстрочный интервал улучшает читаемость даже при идеальном зрении. Доступность — это хороший дизайн.
Стандарты WCAG 2.1: основные требования к тексту
| Требование | Уровень AA | Уровень AAA |
|---|---|---|
| Контраст обычного текста (<18pt) | 4.5:1 | 7:1 |
| Контраст крупного текста (≥18pt) | 3:1 | 4.5:1 |
| Минимальный размер шрифта | Нет требования (рек. 16px) | Нет требования |
| Изменение размера до 200% | Без потери содержания | Без потери содержания |
| Line-height | Нет требования | Мин. 1.5 × font-size |
| Spacing after paragraphs | Нет требования | Мин. 2 × font-size |
«Стандарты доступности — это не цель. Это минимальный порог. Настоящая цель — чтобы каждый человек мог прочитать ваш текст без усилий.»
— Артём Кириленко, аналитик MireviaКонтрастность: как проверять и что делать
Коэффициент контрастности рассчитывается по формуле: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость (luminance) более светлого и более тёмного цветов. Это не то же самое, что визуальная разница между цветами — два ярких цвета могут выглядеть контрастно, но иметь низкий коэффициент контрастности.
Инструменты для проверки: WebAIM Contrast Checker (webaim.org/resources/contrastchecker), расширение Stark для Figma и браузеров, встроенный инспектор DevTools в Chrome (показывает коэффициент во вкладке Accessibility). Для автоматической проверки в CI-пайплайне — axe-core или Pa11y.
Размер шрифта: практические рекомендации
- Минимальный размер основного текста — 16px. Ниже этого значения чтение становится некомфортным для людей с лёгкими нарушениями зрения.
- Для пользователей с возможностью изменить размер шрифта в настройках браузера используйте относительные единицы (rem, em), а не px для font-size.
- Избегайте font-size в CSS для базового текста ниже 1rem (16px). Допустимо использовать меньший размер только для вспомогательных элементов (copyright, footnotes) — но не ниже 12px.
- Проверяйте, что при 200%-увеличении в браузере (Ctrl/Cmd + «+» × 4) контент остаётся читаемым и не обрезается.
Межстрочный интервал и читаемость для дислексиков
По данным Международной ассоциации дислексии (IDA), около 15–20% населения имеют симптомы дислексии. Для этих пользователей правильная типографика имеет критическое значение. Рекомендации British Dyslexia Association: line-height не менее 1.5, межбуквенный интервал нейтральный или слегка увеличенный, достаточное пространство между абзацами, ширина строки не более 70 символов.
Шрифты, демонстрирующие лучшую читаемость для людей с дислексией: Arial, Verdana, Tahoma (из serif — Georgia). Специализированные шрифты OpenDyslexic и Lexie Readable разработаны для этой задачи, но их эффективность неоднозначна в исследованиях.
Чеклист доступности типографики
- Коэффициент контраста основного текста ≥ 4.5:1 (проверено в WebAIM)
- Размер основного текста ≥ 16px (1rem)
- Line-height ≥ 1.5 для основного текста
- Ширина строки 60–75 символов
- Интервал между абзацами ≥ 1 × font-size
- Относительные единицы для font-size (rem/em)
- Контент доступен при 200% масштабировании
- Ссылки различимы не только по цвету (подчёркивание или вес)
- Нет текста, нанесённого поверх сложного изображения без достаточного контраста