Кольори інтерфейсу додатка впливають на легкість його читання й розуміння. Достатній контраст кольорів полегшує перегляд і сприйняття тексту й зображень.
Достатній контраст кольорів не лише допомагає користувачам із вадами зору, а й полегшує користування інтерфейсом на пристроях в особливих умовах освітлення, наприклад, якщо екран має низьку яскравість або на нього світить сонце.
Застосування
Під час налаштування інтерфейсу користувача додатка визначте кольори фону й переднього плану. Вони мають бути достатньо контрастними.
Коефіцієнт контрастності визначається на основі різниці яскравості або інтенсивності світла між двома сусідніми кольорами на екрані. Діапазон значень: від 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 щодо мінімального коефіцієнта контрастності.
- Також можна встановити висококонтрастну тему або дозволити користувачеві вибирати кольори основного контенту.
Докладнішу інформацію можна знайти в цьому посібнику.
Тестування
Щоб уручну перевірити контраст кольорів у додатку:
- Відкрийте додаток.
- Зробіть знімок екрана.
- Виберіть зразки кольору на знімку екрана за допомогою інструмента "Піпетка" програмного забезпечення для перегляду або редагування зображень.
- Визначте коефіцієнт контрастності сусідніх кольорів у калькуляторі коефіцієнта контрастності.
- Якщо коефіцієнт контрастності не відповідає рекомендаціям W3C, варто збільшити контраст кольорів інтерфейсу.
Автоматизовані інструменти тестування в ОС Android можуть виявляти різноманітні проблеми з контрастом кольорів. Щоб перевірити додаток на пристрої вручну, скористайтеся Сканером доступності для Android. Щоб здійснювати автоматизовані тестування, увімкніть перевірку спеціальних можливостей в Espresso й Robolectric.