От того, какие цвета вы выберете для интерфейса, зависит легкость чтения и восприятия. Текст и изображения должны быть контрастными, чтобы пользователям было проще работать с приложением.
Насыщенный цветовой контраст облегчает взаимодействие с приложением не только людям с различными нарушениями зрения. Он помогает всем, кто пользуется приложением в условиях сильной освещенности (например, под прямыми солнечными лучами) или на неярком экране.
Реализация
При создании пользовательского интерфейса выбирайте цвета переднего и заднего планов с высоким уровнем контраста.
Коэффициент контрастности рассчитывается исходя из разницы в яркости (интенсивности излучаемого света) между двумя смежными цветами на экране. Диапазон значений – от 1 до 21 (обычно указывается от 1:1 до 21:1). Чем больше значение, тем выше контраст. Существует множество инструментов для вычисления коэффициента контрастности двух смежных цветов, например этот калькулятор.
Если текст отображается с помощью компонента TextView, используйте атрибуты android:textColor и android:background, чтобы определить цвета переднего и заднего планов с высоким уровнем контраста. Если используется компонент Text в Compose, определите цвета переднего и заднего планов с высоким уровнем контраста с помощью атрибута Modifier.background и параметра цвета.
- Мелкий шрифт (обычный менее 18 пунктов, полужирный менее 14 пунктов) – минимум 4,5:1.
- Крупный шрифт (обычный не менее 18 пунктов, полужирный не менее 14 пунктов) – минимум 3,0:1.
Примечания
-
При использовании
ImageViewилиImageдля отображения графического контента или иконографики убедитесь, что контрастность цвета переднего плана и фона соответствует рекомендуемым значениям. - Коэффициент контрастности рассчитывается, исходя из видимого цвета фона и изображения при наложении на другие элементы. Если цвета определяются в формате ARGB (шестнадцатеричные значения #AARRGGBB), учтите, что прозрачные цвета (с альфа-каналом меньше 255) при наложении на другой контент могут менять видимый оттенок.
- Сглаживание и плавное изменение шрифтов могут сказываться на видимом цвете контента, в особенности с малой шириной штриха. Чтобы сделать текст более читаемым, используйте сочетание цветов с большим коэффициентом контрастности или увеличьте ширину штриха.
Дизайн
Используйте палитру с насыщенным контрастом смежных цветов.
- Соблюдайте требования W3C в отношении минимально допустимого коэффициента контрастности, особенно для текста и значков.
- Предоставьте пользователю возможность выбрать тему с высоким контрастом или цвета основного контента.
Дополнительная информация содержится в руководстве по внедрению Material Design.
Тестирование
Чтобы проверить цветовой контраст в приложении вручную, выполните следующие действия:
- Запустите приложение.
- Сделайте скриншот.
- В программе для просмотра или редактирования изображений с помощью инструмента "Пипетка" выберите образцы цвета на скриншоте.
- С помощью специального калькулятора определите коэффициент контрастности смежных цветов.
- Если полученное значение меньше рекомендованного W3C, вы можете улучшить интерфейс, усилив цветовой контраст.
Многие проблемы, связанные с цветовым контрастом, можно выявить в ходе автоматического тестирования. Чтобы проверить приложение на устройстве вручную, воспользуйтесь Сканером доступности. Для автоматического тестирования включите проверку доступности в Espresso и Robolectric.