Material Design на русском. Часть 17 — Разборчивость текста
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
Стандарты читаемости
Текст должен быть разборчивым и соответствовать стандартам по доступности. Согласно руководству по доступности веб-контента уровня АА (WCAG 2.0) — уровень контраста между текстом и фоном в твоем дизайне должен соответствовать 4:5:1 значению для большого текста.
Текст на фоне
Текст на цветном фоне
Черный текст рекомендуется использовать на светлом фоне, а белый-на темном. Если приложение имеет как светлую, так и темную темы, то убедись, что текст контрастный на каждой теме.
Цветные фоны или типографика дополнительно изменяют правила, касающиеся непрозрачности текста и различных состояний текста.
Использование прозрачности для тексте
Правильно: Читабельность сохраняется при использовании прозрачности для черного цвета текста на цветной поверхности.
Неправильно: Избегай использования прозрачности для серого текста, который не читается на цветных поверхностях.
Темный текст на светлом фоне
Темный текст на светлом фоне (здесь #000000 на #FFFFFF) использует следующие уровни непрозрачности:
- Текст с высоким акцентом имеет непрозрачность 87%
- Текст со средним акцентом и текст подсказки имеют непрозрачность 60%
- Недоступный или заблокированный текст имеет непрозрачность 38%
Цветой текст и фон
Экономно применяй цвет к тексту, чтобы привлечь внимание или сделать акцент. В идеале цветной текст должен использоваться на заголовках, кнопках и ссылках.
Правильно: Большие и короткие заголовки отлично подходят чтобы применять цвет.
Осторожно: Длинные цветные текста затрудняют чтение.
Типы текста
Вспомогательный текст
Вспомогательный текст задаёт контекст текстовым полям, например, как они (поля) будут использоваться. Вспомогательный текст может использовать цвета бренда, но должен быть разборчивым, как это определено стандартами WCAG.
Например, вспомогательный текст на светлом фоне использует следующие значения по умолчанию:
- Вспомогательный текст с высоким акцентом: использует значение #000000 с непрозрачностью 87%.
- Вспомогательный текст цвета по умолчанию: использует значение #000000 с непрозрачностью 60%.
- Вспомогательный текст ошибки по умолчанию: использует значение #B00020 при 100% непрозрачности.
Текст выделения
Чтобы подкрепить в приложении бренд, при выделении текста можно использовать основной или вторичный цвета приложения.
Выделенный текст должен быть читаем на фоне цвета выделения, а цвет выделения должен контрастировать с цветом фона. Кроме того, можно показать контур выделения, анимацию или использовать какие-то маркеры чтобы четко обозначить то, что текст выделен.
1 — Текст. 2 — Выделение текста. 3 — Фон (белый).
Выделение текста можно кастомизировать, например можно использовать акцентные цвета из твоей палитры.
Иконки и другие символы
Иконки и другие элементы не обязательно должны соответствовать стандартам разборчивости WCAG, но они должны быть достаточно заметны, чтобы пользователь смог понять их значение в контексте передачи информации или функции.
Например, темные иконки (#000000) или другие элементы на светлом фоне (#FFFFFF) могут использовать следующие значения непрозрачности:
- Активные иконки имеют непрозрачность 87%
- Неактивные иконки имеют непрозрачность 60%
- Заблокированные/недоступные иконки имеют непрозрачность 38%
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new
