Color Blindness dan Desain: Memastikan Semua Orang Bisa Melihat
Pernahkah kalian kebingungan saat sedang mengisi formulir online karena menampilkan intruksi, “Silahkan perbaiki kolom yang bewarna merah” padahal di mata kalian semua kolom itu serupa?
Ini adalah kenyataan yang dihadapi oleh sekitar 300 juta orang di dunia yang mengalami color blindness atau buta warna.
Kenyataan ini sering kali luput dari perhatian desainer yang memiliki penglihatan mata normal. Tanpa kita sadari, dibelahan bumi ini ada kasus kejadian dimana pengguna hampir menghapus seluruh pekerjaannya hanya karena kesulitan membedakan tombol “Simpan” dan “Hapus” disebuah aplikasi. Kedua simbol hanya dibedakan dengan warna merah dan hijau, tanpa teks pendukung.
Kejadian seperti ini menyadarkan bahwa desain yang tidak inklusif sebenarnya sedang mengusir penggunanya sendiri dan telah memotong akses untuk jutaan pengguna.
Apa Itu Buta Warna?
Color blindness bukan berarti seseorang hanya bisa melihat dunia dalam hitam dan putih seperti di film lama. Kondisi ini lebih kompleks dari itu. Secara medis, buta warna terjadi ketika sel kerucut di retina mata tidak berfungsi optimal dalam mendeteksi spektrum warna tertentu.
Berikut ini jenis-jenis buta warna yang diketahui:
- Deuteranopia dan Protanopia merupakan jenis yang paling umum. Dialami sekitar 8% pria dan 0,5% wanita. Mereka kesulitan membedakan merah dan hijau. Sayangnya, kedua warna ini sering kita gunakan untuk indikator berhasil atau gagal. Salah satu contoh penggunaan kedua warna ini dapat ditemukan pada lampu lalu lintas.
- Tritanopia lebih jarang terjadi, namun tetap menyebabkan kesulitan membedakan antara biru dan kuning. Betapa membingungkannya jika interface aplikasi cuaca menggunakan gradasi biru dan kuning untuk menunjukkan suhu.
- Achromatopsia adalah kondisi paling langka dimana seseorang benar-benar hanya melihat skala abu-abu. Meski jarang terjadi, desainer tetap perlu mempertimbangkan kemungkinan ini.
Kepentingan bagi Bisnis
Selain faktor empati yang telah dipaparkan sebelumnya, desain inklusif adalah strategi bisnis yang cerdas. Dengan kondisi penderita buta warna yang lumayan banyak, desain ramah buta warna dapat membantu banyak orang karena kebutuhan mereka yang tidak kalah pentingnya dengan orang yang tidak mengalami color blindness.
Desain yang dimaksud dapat berupa penggunaan layar di bawah terik matahari atau pengguna lansia yang kontras matanya sudah menurun.
Apabila fitur semacam itu timbul dalam suatu produk, besar kemungkinan membuka peluang keuntungan ke depannya. Namun, tentu saja dengan syarat pemeliharaan yang teratur dan cakap. Baik dari pengguna, mau pun tim pengembang.
Biasanya, struktur desain yang memiliki kontras tinggi dan teks yang jelas akan lebih mudah dipahami oleh algoritma mesin pencari.
Kesalahan Desain yang Sering Terjadi
Dalam teori persepsi visual, ada istilah double encoding. Ini adalah teknik menyampaikan informasi yang sama melalui dua cara berbeda. Teknik ini bukan hanya berfungsi membantu orang buta warna, tetapi juga mempercepat otak pengguna dalam memproses informasi. Jadi, desain bukan cuma dapat dipahami, tapi juga jadi lebih efisien secara navigasi.
Desainer terkadang terlalu fokus pada nilai estetika sampai lupa pada fungsi. Berikut ini adalah beberapa kesalahan desain yang sering terjadi serta solusinya:
- Ketergantungan penuh pada warna sebagai satu-satunya indikator
Beberapa kali salah satu dari kalian sering melihat grafik yang berfungsi untuk membedakan data positif dan data negatif. Bahkan dikhalayak publik saja, ada interpretasi khusus mengenai penggunaan warna merah dan hijau. Biasanya, kesan pertama yang akan timbul adalah warna merah untuk warna salah dan hijau untuk warna benar.
Ini adalah kesalahan klasik. Bagi seseorang dengan deuteranopia akan melihat kedua warna tersebut hampir identik. Ketidakmampuan ini memaksa mereka hanya bisa menebak-nebak akan pilihan yang dipilih.
Sebaiknya gunakan kombinasi warna dipadu dengan bentuk, pola, atau teks. Jangan biarkan aspek warna bekerja sendirian. Misalnya, dalam grafik batang tambahkan pattern berbeda (garis diagonal, titik-titik, solid) selain warna. Untuk tombol status, sertakan ikon berupa centang untuk pertanda berhasil, silang untuk tanda error.
- Kontras warna yang tidak memadai
Desain minimalis dengan teks abu-abu gelap dengan abu-abu muda mungkin akan terlihat lebih keren dan estetika. Namun, jika dipikirkan kembali hal ini bisa menjadi mimpi buruk bagi sebagian orang. Kontras yang rendah dapat mempersulit pembaca. Orang dengan penglihatan normal saja bisa kesusahan. Bagaimana dengan pengguna dengan gangguan penglihatan warna?
Sebaiknya ikuti standar WCAG (Web Content Accessibility Guidelines) yang merekomendasikan rasio kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks biasa. Gunakan tools seperti WebAIM Contrast Checker untuk memastikan desain memenuhi standar ini. Jadi, desain kalian tidak cuma cantik tapi juga bisa dibaca oleh semua orang.
- Link yang hanya dibedakan dengan warna
Pernah melihat teks biru di tengah paragraph hitam?
Iya, itu adalah teks hyperlink berwarna biru. Hal ini terdengar umum dan biasa aja bagi kita yang bisa melihat jelas link tersebut. Tapi untuk orang dengan protanopia, tanpa underline atau indikator visual warna biru tersebut bisa terlihat pudar atau menyatu dengan warna teks biasa. Apabila tidak ada penanda, maka mereka pun tidak bakalan menyadari kalau teks itu bisa diklik.
Sebaiknya gunakan cara paling klasik dengan mempertahankan underline pada link, atau berikan indikator visual tambahan seperti ikon panah atau perubahan ketebalan huruf. Jika ingin mempercantik desain, tambahkan efek selain perubahan warna, misalnya background highlight atau garis tepi.
- Formulir dengan error message yang ambigu
Pasti saat mengisi sebuah form pada GForm pernah menemukan semacam intruksi "Kolom yang ditandai merah wajib diisi" dibeberapa kolom pertanyaan wajib. Sebenarnya, untuk pengguna buta warna instruksi itu tidak membantu sama sekali. Pengguna dengan color blindness akan kebingungan mencari kolom mana yang dimaksud karena semua kolom terlihat sama di mata mereka.
Berikan informasi yang spesifik dengan cara kombinasikan warna merah dengan ikon peringatan, beri border atau garis tepi yang lebih tebal, dan yang paling penting adalah teks error yang spesifik. Misalnya, "Email belum diisi" langsung di bawah field email, bukan hanya perubahan warna border.
Prinsip Desain Inklusif untuk Color Blindness
Di Universitas Muhammadiyah Riau, saat kami mempelajari prinsip-prinsip desain interface dalam mata kuliah Interaksi Manusia dan Komputer, salah satu pembelajaran penting adalah mengenai prinsip sebuah desain, yaitu:
- Redundant Coding
Hindari menyampaikan informasi hanya melalui satu visual warna. Gunakan minimal dua cara untuk memahami informasi yang sama dengan menambahkan teks atau ikon agar lebih jelas.
- Pattern dan Texture
Manfaatkan tekstur dan pola, terutama grafik seperti pie chart. Jangan hanya menggunakan warna untuk membedakan setiap segmen, namun tambahkan pola unik seperti garis-garis dan lainnya. Dengan begitu, informasi tetap dapat dibaca bahkan dalam mode hitam putih saja.
- Gunakan Tipografi
Mainkan variasi ukuran (size), ketebalan (weight), dan jarak (spacing) yang efektif. Tidak perlu bergantung penuh pada warna mentereng untuk membuat teks menjadi penting. Cukup sekedar bold saja, mata otomatis pesan terasa lebih utama dibanding teks lainnya.
- Ikon dan Simbol yang Jelas
Simbol seperti tempat sampah untuk kegiatan “hapus” atau kaca pembesar untuk kegiatan “cari” adalah ikon universal. Disetiap aplikasi, dapat kita temukan dengan bentuk yang sama. Dapat dilihat bahwa ikon universal ini sudah dipahami lintas budaya dan kemampuan visual untuk berbagai fungsi yang berbeda.
Tidak hanya ada pada aplikasi desain saja, diberbagai macam bidang juga menggunakan ikon yang sama. Hal ini menjadi salah satu cara komunikasi visual.
Kesimpulan
Desain yang baik tidak pernah mengandalkan warna sebagai satu-satunya pembawa informasi. Warna adalah pemanis, bukan pondasi. Ketika kita memahami prinsip ini, kita akan menciptakan interface yang tidak hanya bagus, tapi juga berfungsi dan dapat digunakan untuk semua orang.
Desain yang benar adalah desain yang maknanya tidak akan pudar meskipun warnanya hilang.
Dunia digital yang inklusif dimulai dari keputusan-keputusan kecil yang kita ambil di depan layar kerja kita setiap hari. Dengan begitu, desain yang mengisi layar tentunya bukan sekedar isi mengisi saja, melainkan ada tanggung jawab besar disana.
Mulai sedari sekarang, pertanyakan beberapa aspek yang tidak dirasakan secara pribadi, namun telah dirasakan oleh orang lain. Setiap kali menambahkan warna dalam desain, pertimbangkan terlebih dahulu. Apakah informasi tersebut masih dapat dipahami tanpa warna atau tidak. Jika jawabannya tidak, tambahkan layer komunikasi visual lain.
Dunia digital seharusnya dapat diakses untuk semua. Dan itu dimulai dari keputusan desain kecil yang dibuat setiap hari.
Artikel ini ditulis sebagai bagian dari pembelajaran mata kuliah Interaksi Manusia dan Komputer di Program Studi Teknik Informatika, Universitas Muhammadiyah Riau.
Untuk informasi lebih lanjut mengenai program studi, silakan kunjungi www.umri.ac.id.
Referensi
https://keslan.kemkes.go.id/view_artikel/1387/buta-warna
https://jsi.ejournal.unsri.ac.id/index.php/jsi/article/view/118/117
https://www.viewsonic.com/library/tech/what-is-color-blindness-and-how-does-technology-help/