Цветовете, които избирате за интерфейса на приложението си, влияят на практическата работа на потребителите. Достатъчният контраст улеснява четенето и разбирането на текста и изображенията.
Освен че е от полза за потребителите с различни зрителни увреждания, достатъчният контраст на цветовете подобрява видимостта на интерфейса за всички потребители при екстремни светлинни условия – например при излагане на устройството на пряка слънчева светлина или при дисплеи с ниска яркост.
Реализация
Когато разработвате потребителския интерфейс на дадено приложение, изберете достатъчно контрастни цветове за задния и предния план.
Терминът „контрастно съотношение“ се използва за разликата в яркостта (или интензитета) на излъчваната светлина от два съседни цвята, които се показват на екрана. Това съотношение варира от 1 до 21 (често изписвано като 1:1 до 21:1), където по-големите стойности означават по-висок контраст. Съществуват много инструменти за изчисляване на контрастното съотношение между два съседни цвята, като например този калкулатор.
Когато използвате TextView за показване на текст, дефинирайте цветове с голямо контрастно съотношение за задния и предния план посредством android:textColor и android:background. Когато използвате Text в Compose, използвайте параметъра color и Modifier.background, за да дефинирате цветове за предния и задния план с голямо контрастно съотношение.
- поне 4,5:1 за малък текст (обикновен шрифт с размер под 18 пункта и удебелен шрифт с размер под 14 пункта);
- поне 3:1 за голям текст (обикновен шрифт с размер поне 18 пункта и удебелен шрифт с размер поне 14 пункта).
Забележки относно контраста на цветовете:
-
Когато използвате
ImageViewилиImageза рендериране на графично съдържание или система от икони, уверете се, че контрастът между цветовете на предния и задния план е не по-малък от съответната препоръчана стойност. - Контрастните съотношения се измерват въз основа на видимите цветове на предния и задния план на даден елемент, когато бъде насложен върху други елементи. Ако дефинирате цветове във формат ARGB (чрез шестнадесетични стойности #AARRGGBB), имайте предвид, че цветове с някаква прозрачност (тези със стойност под 255 за алфа-канала) може да имат друг видим цвят поради сливането със съдържанието, рендерирано под тях.
- Изглаждането и депикселизирането на шрифта може да окажат влияние върху видимите цветове на част от съдържанието и особено на това с малка ширина на щриха. За да подобрите четимостта, изберете цветова комбинация с по-голямо контрастно съотношение или увеличете ширината на щриха.
Дизайн
При разработване на потребителски интерфейс е добре да използвате палитра с достатъчен контраст между съседните цветове.
- При работа конкретно с текст и система от икони следвайте указанията на W3C за минимални контрастни съотношения.
- Обмислете възможността да използвате тема с висок контраст или да разрешите на потребителите да избират цветове за основното съдържание.
За повече информация вижте указанията за достъпност за material design относно цветовете и контраста.
Тестване
За да проверите ръчно контраста на цветовете в дадено приложение:
- Отворете приложението.
- Направете екранна снимка.
- В софтуер за преглеждане или редактиране на изображения използвайте инструмента за пипета, за да получите извадка от видимите цветове на екранната снимка.
- Определете какво е контрастното съотношение между съседните цветове посредством калкулатор за целта.
- Ако контрастното съотношение е по-малко от посоченото в указанията на W3C, увеличаването му може да подобри интерфейса.
Автоматизираните инструменти на Android за тестване могат да откриват много проблеми с контраста на цветовете. Добре е да използвате „Проверка на достъпността“ за Android за ръчно тестване на приложението ви на хардуерно устройство. За автоматизирани тестове включете функцията за проверка на достъпността в Espresso и Robolectric.