Материальный дизайн — читаемость текста

Стандарты

Текст в дизайне должен соответствовать стандартам доступности. Коэффициент контрастности между текстом и фоном составляет 4.5:1 для обычного текста и 3:1 для заголовков.

Текст и фон

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

На цветном фоне используйте чёрный или белый полупрозрачный текст. Это добавит фоновые оттенки тексту, а при изменении цвета фона, текст примет значение оттенка и подстроится под новый дизайн.

Чёрный полупрозрачный цвет отчётливо виден на цветном фоне.

Не читаемый серый текст.

Используйте эти уровни прозрачности для тёмного текста на светлом фоне:

  • Выделенный текст — 87%
  • Обычный текст — 60%
  • Приглушенный текст — 38%

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

Используйте этот инструмент, чтобы определить соответствует ли выбранный цвет стандартам доступности.

Цвет хорошо подходит для небольших фрагментов текста, например, заголовков.

Читаемость основного текста может быть затрудненна.

Контекст

Вспомогательный текст

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

Вспомогательный текст на светлом фоне может использовать следующие уровни прозрачности:

  • Акцент: HEX #000000 с прозрачностью 87%.
  • Текст по умолчанию: HEX #000000 с прозрачностью 60%.
  • Ошибка: HEX #B00020.

Выбранный текст

При выборе текста можно использовать основной или дополнительный цвет. Это дополнительно подчеркнёт видимость бренда в дизайне.

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

1. Основной текст.
2. Выбранный текст.
3. Фон.

Иконки и другие символы

Иконки и другие элементы не должны соответствовать стандартам WCAG, но должны быть разборчивыми, чтобы передать информацию.

Значения цвета и прозрачности по умолчанию в материальном дизайне:

  • Активные состояние иконки: 87%.
  • Неактивные состояние иконки: 60%.
  • Деактивированное состояние иконки: 38%.