Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

Цвет не должен служить основным источником информации для пользователей. Например, для пользователей с дальтонизмом или слабовидящих красный цвет состояния ошибки может ничем не отличаться от обычного состояния контрола. Дополняйте обратную связь контрола иконками и текстом.

Что добавлять к цвету

• Иконка + текстовая подпись: не просто красный фон, а восклицательный знак и слово «Ошибка»
• В графиках и таблицах — текстуры, паттерны или прямые подписи к данным, не только цветовые легенды
• В формах — не только красная рамка у поля с ошибкой, но и текст под полем с объяснением

Почему это критично за пределами экрана
Медицинские дашборды, авиационные интерфейсы, промышленные панели — там цвет как единственный сигнал может стоить жизни. Это не преувеличение, это задокументированные кейсы.

Практическое правило
Уберите цвет совсем — интерфейс должен остаться понятным. Если без цвета непонятно, что происходит — дизайн нужно доработать.

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

Чаще всего пользователи быстро просматривают страницу, пробегая по ее основным элементам — заголовкам и тексту
Чтобы пользователь быстро нашел нужную информацию и не запутался, типографика должна соответствовать иерархии.

Соблюдайте иерархию заголовков
С четкой иерархией пользователю легче найти нужную информацию на странице. К примеру, человеку со скринридером иерархия помогает формировать образ страницы, когда он прослушивает заголовки.
Порядок размерности заголовков должен идти от самого крупного, к самому мелкому.
Для основного текста используйте шрифт минимум 16 пунктов. Это комфортный для большинства пользователей размер.

Определите оптимальный интерлиньяж
Чтобы пользователю было легче сосредоточиться на одной линии текста, не терять ее или не цепляться за соседние строки, придерживайтесь комфортного отношения интерлиньяжа к кеглю:

• 140-165% — для основного текста;
• 100-130% — для заголовков;
• 130% — для коротких текстов.

Чем длиннее строка, тем больше должен быть интерлиньяж.
Чем больше размер шрифта, тем меньше интерлиньяж. В заголовках он самый маленький, а в мелком тексте увеличенный.

Задайте комфортную для чтения длину строки
Слишком длинные или слишком короткие строки некомфортно читать.
Для обычного текста задавайте длину строки от 45 до 75 символов, включая пробелы и знаки препинания. Оптимальное количество — 66 символов.
Для заголовков, подписей к изображениям и форм длина строки может быть короче.

Выбирайте разборчивые шрифты
Чем декоративнее шрифт, тем больше шансов, что для пользователя он будет нечитаемым. Особенно для людей с дислексией.
Пользователи с дислексией сложнее воспринимают слова и медленнее читают текст. Например, у них могут вызвать трудности:

• буквы, похожие между собой в обычном начертании;
• буквы, отраженные по вертикальной и горизонтальной осям;
• перевернутые буквы;
• слова с перемешанными буквами.

Cтарайтесь использовать максимально разборчивый шрифт, который хорошо читается в любом размере, с высокими строчными буквами и достаточным межбуквенным расстоянием.
Если есть возможность, используйте адаптированные шрифты Arial, Trebuchet MS, Read Regular, Myriad Pro и Geneva или добавьте возможность изменения всего текста на один из них.

Указывайте для ссылок и кнопок осмысленные названия
Кнопки с обобщенным названием могут запутать пользователя — «Подробнее» и «Узнать больше» не имеют никакого контекста.
Люди, использующие для навигации список всех кнопок или ссылок на странице и вовсе не поймут, что произойдет при нажатии.
Если в макете веба нет возможности называть элемент осмысленно, придумайте ему название и попросите разработчика добавить его в доступное имя. Это имя элемента в коде, которое зачитывает скринридер.

Доступное имя — это название элемента, которое скринридер сообщает пользователю при фокусе на элемент.
Кнопки могут получить доступное имя несколькими способами:

• Атрибут aria-label. В значение атрибута указываем желаемое название, которое будет озвучивать скринридер;
• Атрибут aria-labelledby — присваиваем отдельному тексту id, которой потом встраиваем через aria-labelledby в кнопку или другой элемент.

Используйте для ссылок отдельный визуальный стиль
Привычные и знакомые для пользователя паттерны — подчеркнутая ссылка. Синяя — не посещенная, фиолетовая — посещенная.
Если при нажатии на ссылку открывается новое окно или вкладка, пользователю следует сообщить об этом заранее.
Используйте иконку диагональной стрелки рядом с текстом внешней ссылки. Это самый распространенный способ сообщить пользователю, что она откроется в новой вкладке.

Сделайте ссылку для пропуска контента
Skip link — это ссылка, которая помогает быстро перейти к основному содержанию страницы при использовании клавиатуры, пропустив, например, блок с навигацией.
Она нужна, чтобы пользователю не приходилось много раз нажимать на «Tab» на каждой новой странице сайта, чтобы добраться до контента.
Ссылка должна быть хорошо видна в состоянии фокуса и появляться с плавной анимацией, чтобы не сбить с толку пользователей.

Задавайте область нажатия не меньше 44 пикселей
В маленькую область нажатия намного сложнее попасть, чем в большую.
Делайте область нажатия не меньше 44 пикселей, чтобы среднестатистический пользователь мог попасть по ней большим пальцем.
Если иконки маленькие, то увеличивайте область нажатия вокруг них.
Так вы сделаете интерфейс удобнее для всех: и для пользователей с двигательными нарушениями, и для тех, кто находится в движении или дороге.

Указывайте описательные alt тексты для изображений
Альт-текст — это описание изображения, которое скринридер озвучивает пользователями.
Если у изображений нет альт-текста, то скринридеры просто произнесут имя файла или слово «изображение», что чаще всего не даст никакого контекста.
Описывайте изображения подробно, но ограничивайтесь примерно 130 символами для каждой картинки.
Не используйте слова «изображение», «фото» и так далее. Скринридер и так произнесет формат контента.

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.

Текст с низким контрастом к фону труднее разбирать, а при возникновении ограничений такой текст может стать совсем нечитаемым. Текст с высоким контрастом к фону тоже утомляет глаза — ресурс колбочек и палочек исчерпаем.

Иногда пониженный контраст необходим для управления вниманием пользователя или создания определенного контекста, например, для обозначения заблокированных состояний контролов.

• Текст должен иметь контрастность 4,5:1
• Крупный текст размером от 18pt — 3:1
• UI-компоненты и графика — минимум 3:1

Контраст — первая линия защиты доступности. Если цвета плохо различимы в идеальных условиях, в реальных они станут невидимыми.

Что проверять:

1. Все состояния ссылок и кнопок — не только обычное, но и :hover, :focus, :visited
2. Если вы проектируете тёмный режим, он должен соответствовать тем же стандартам доступности, что и светлый — только в инверсии. 
3. Текст поверх фото или градиента — самое уязвимое место
4. Плейсхолдеры в полях — часто не проходят проверку контрастности

Белый текст на тёмном фоне может быть проблемой для людей с астигматизмом — давать выбор пользователю обязательно.