Warna yang dipilih untuk antarmuka aplikasi memengaruhi seberapa mudah pengguna membaca dan memahaminya. Kontras warna yang memadai membuat teks dan gambar lebih mudah dibaca dan dipahami.
Selain bermanfaat bagi pengguna yang memiliki gangguan penglihatan, kontras warna yang memadai juga membantu pengguna melihat antarmuka pada perangkat di kondisi pencahayaan yang ekstrem, seperti terpapar cahaya matahari langsung atau pada layar dengan kecerahan rendah.
Penerapan
Ketika menerapkan antarmuka pengguna aplikasi, tentukan warna latar belakang dan latar depan dengan kontras warna yang memadai.
"Rasio kontras" adalah komputasi dari perbedaan luminans, atau intensitas cahaya yang dihasilkan, antara dua warna yang bersebelahan ketika ditampilkan di layar. Rasio ini berkisar dari 1 sampai 21 (sering ditulis 1:1 sampai 21:1), di mana angka yang lebih besar berarti kontrasnya lebih tinggi. Ada banyak alat yang tersedia untuk menghitung rasio kontras dua warna yang bersebelahan, seperti kalkulator rasio kontras warna.
Ketika menggunakan TextView untuk menampilkan teks, gunakan android:textColor dan android:background untuk menentukan warna latar depan dan latar belakang dengan rasio kontras yang tinggi. Saat menggunakan Text di Compose, gunakan parameter warna dan Modifier.background untuk menentukan warna latar depan dan latar belakang dengan rasio kontras yang tinggi.
- Setidaknya rasio 4,5:1 untuk teks kecil (di bawah 18 poin untuk jenis font reguler atau 14 poin untuk jenis font tebal)
- Setidaknya rasio 3,0:1 untuk teks besar (18 poin untuk jenis font reguler dan lebih dari sama dengan 14 poin untuk jenis font tebal)
Catatan terkait kontras warna:
-
Saat menggunakan
ImageViewatauImageuntuk merender konten grafis atau ikonografi, pastikan kontras antara warna latar depan dan latar belakang memenuhi atau melampaui ratio yang disarankan. - Rasio kontras diukur berdasarkan warna jelas latar depan dan latar belakang elemen ketika dilapiskan pada elemen lainnya. Jika menentukan warna menggunakan format ARGB (nilai heks #AARRGGBB), perhatikan bahwa warna yang tidak buram (warna dengan nilai saluran alfa kurang dari 255) mungkin memiliki warna jelas yang berbeda karena memadukan dengan konten yang dirender di bawahnya.
- Kehalusan dan antialias font dapat memengaruhi warna jelas beberapa konten, terutama konten dengan lebar guratan yang rendah. Untuk meningkatkan keterbacaan, pilih kombinasi warna dengan rasio kontras yang lebih besar atau perbesar lebar guratan konten.
Desain
Ketika merancang antarmuka pengguna, pertimbangkan untuk memilih palet dengan kontras warna yang memadai untuk warna yang berdekatan.
- Untuk teks dan ikonogafi khususnya, ikuti pedoman W3C untuk rasio kontras minimum
- Pertimbangkan untuk menyertakan tema dengan kontras yang tinggi sebagai opsi, atau izinkan pengguna memilih warna untuk konten utama
Untuk mengetahui informasi selengkapnya, baca pedoman warna dan kontras Aksesibilitas Desain Material.
Pengujian
Untuk memeriksa kontras warna secara manual di aplikasi:
- Buka aplikasi.
- Ambil screenshot.
- Dengan menggunakan software pengeditan atau penampil gambar, gunakan "alat pipet" untuk mengekstrak contoh warna yang terlihat dari screenshot.
- Gunakan kalkulator rasio kontras untuk menentukan rasio kontras warna yang berdekatan.
- Jika rasio kontras kurang dari yang didefinisikan oleh pedoman W3C, antarmuka mungkin dapat memanfaatkan kontras warna yang ditingkatkan.
Alat pengujian otomatis Android dapat mendeteksi banyak masalah terkait kontras warna. Pertimbangkan untuk menggunakan Accessibility Scanner untuk Android guna menguji aplikasi di perangkat secara manual. Untuk pengujian otomatis, aktifkan pemeriksaan aksesibilitas di Espresso dan Robolectric.