Desain UI untuk Pengguna Buta Warna

Orang buta warna merupakan bagian penting dari populasi – sekitar 1 dari 12 pria dan 1 dari 200 wanita tepatnya. Namun, pengguna buta warna adalah audiens yang sering diabaikan dalam desain UI.

Banyak kesalahan buta warna untuk melihat dalam hitam dan putih, dan sementara ini adalah salah satu jenis, ada versi yang kurang langka dan kurang ekstrim.

Kebanyakan orang adalah trikromatik, artinya mereka melihat warna sebagai kombinasi dari tiga warna: hijau, merah, dan biru. Berbagai jenis buta warna atau kekurangan penglihatan warna (CVD) berasal dari ketidakmampuan untuk melihat satu atau lebih dari warna-warna ini dengan jelas. Jenis CVD yang paling umum adalah buta warna merah-hijau, di mana sulit untuk membedakan antara merah dan hijau, dan buta warna merah, di mana warna merah tampak kusam.

Kami percaya bahwa setiap orang harus memiliki akses yang adil dan setara ke internet, jadi desainer UI harus mendesain dengan mempertimbangkan pengguna buta warna. Undang-Undang Penyandang Disabilitas Amerika (ADA) bahkan mengharuskan organisasi tertentu untuk memenuhi pedoman AA Level WCAG 2.0.

Membuat situs web Anda sesuai dengan ADA tidak sulit, tetapi itu berarti mempertimbangkan aksesibilitas warna. Di luar konsekuensi hukum, mendesain untuk pengguna buta warna sangat penting untuk pengalaman pengguna yang Anda tawarkan.

Mengapa Mendesain untuk Buta Warna Penting

Teori warna memainkan peran besar dalam desain UI karena warna memiliki kekuatan untuk memengaruhi keputusan pembelian pengguna, respons emosional, dan pengalaman pengguna secara keseluruhan. Pikirkan betapa pentingnya memilih warna merek yang tepat untuk bisnis. Sekarang bayangkan bahwa lebih dari 8% orang tidak dapat membaca logo atau situs web Anda karena warna yang Anda pilih. Itu banyak kesempatan yang hilang.

Karena pengguna buta warna tidak dapat membedakan warna tertentu, desainer tidak dapat mengandalkan warna saja untuk keterbacaan atau dampak emosional suatu desain. Saat Anda menggunakan warna, Anda perlu mempertimbangkan bagaimana pengguna berinteraksi dengannya dan membuat desain interaktif yang menarik bagi audiens target – termasuk anggota buta warna. Adalah tugas seorang desainer untuk berempati terhadap poin-poin masalah pengguna sehingga mereka dapat mencegah dan menyelesaikannya.

Saat ini, ada alat seperti Visolve yang dapat menyesuaikan tampilan komputer untuk jenis buta warna tertentu, tetapi tidak semua orang buta warna menggunakan alat ini – bahkan tidak semua orang buta warna tahu bahwa mereka buta warna.

Penting untuk dicatat bahwa situs web Anda bukan satu-satunya tempat untuk mempertimbangkan aksesibilitas warna. Bahkan media sosial Anda dapat diakses oleh tunanetra dan tunanetra.

Terminologi Warna yang Perlu Diketahui

Sebelum kita masuk ke praktik terbaik desain UI untuk pengguna buta warna, ada baiknya untuk meninjau dasar-dasar warna bagi mereka yang bukan ahli desain. Ada empat komponen utama yang perlu dipertimbangkan saat memilih skema warna:

Hue: Ini adalah sinonim untuk 'warna' dan ditentukan oleh panjang gelombang spektral warna.

Saturasi: Juga disebut chroma, ini adalah seberapa intens atau murni suatu warna, ditentukan oleh jumlah abu-abu yang ada. Semakin sedikit abu-abu, semakin cerah warna yang muncul.

Lightness: Lightness tergantung pada jumlah putih atau hitam yang ditambahkan ke warna, masing-masing menciptakan rona dan corak.

Suhu: Ini adalah seberapa hangat atau dingin yang Anda rasakan dari suatu warna. Monitor komputer dapat memengaruhi suhu warna yang dirasakan.

Cara Mendesain untuk Pengguna Buta Warna

Mendesain untuk buta warna tidak berarti membuat produk Anda kurang menarik; itu hanya berarti mengikuti praktik terbaik tertentu selama proses desain. Menerapkan prinsip-prinsip desain UX dan UI yang baik hanya akan meningkatkan kegunaan situs web Anda dalam jangka panjang.

Jangan Mendefinisikan Dengan Warna Saja

Saat mendesain untuk pengguna buta warna, Anda tidak dapat mengandalkan warna secara eksklusif untuk pesan apa pun.

Melakukannya adalah kesalahan umum dalam visualisasi data karena grafik, bagan, dan peta sering kali diberi kode warna. Formulir pemesanan yang menunjukkan slot janji temu yang tersedia atau tempat duduk konser yang tersedia melalui kode warna juga umum. Contoh lain termasuk menandakan bidang formulir yang diperlukan atau tidak terjawab dengan menguraikannya dalam warna atau menunjukkan kesalahan dengan warna.

Anda harus menyimpang dari menyampaikan informasi penting dalam teks dan gambar berwarna atau setidaknya memberikan informasi itu dengan cara lain yang dapat diakses.

Pahami Kontras dan Pilihan Warna

Bagi pengguna buta warna, kontras antar warna seringkali lebih penting daripada warna itu sendiri. Berfokus pada kontras bermanfaat bagi desainer karena jenis buta warna yang berbeda membuat menghindari warna tertentu menjadi tidak efisien. Untuk meningkatkan rasio kontras dalam palet ramah buta warna, terangkan warna terang Anda dan gelapkan warna gelap.

Berikut adalah beberapa cara lain untuk meningkatkan visibilitas desain Anda:

• Tekankan perbedaan antara warna latar depan dan latar belakang Anda
• Jangan memilih warna yang bersebelahan pada roda warna kecuali ada perbedaan besar dalam kecerahan
• Hindari menggunakan warna dengan kecerahan yang sama, terlepas dari rona atau saturasi
• Meningkatkan saturasi warna yang digunakan

Dengan mengingat hal itu, masih ada kombinasi warna yang mungkin lebih menantang bagi berbagai jenis pengguna buta warna. Palet ramah buta warna Anda harus menyimpang dari kombinasi warna ini ketika rasio kontras tidak signifikan:

• merah dan hijau
• Hijau dan biru
• Hijau dan coklat
• Hijau dan abu-abu
• Hijau dan hitam
• Biru dan abu-abu
• Biru dan ungu
• Kuning dan hijau muda

Menerapkan Pola dan Tekstur

Salah satu cara untuk memperbarui desain visual Anda untuk pengguna buta warna tanpa mengandalkan palet warna saja adalah dengan menggunakan pola dan tekstur. Ini bekerja dengan baik dalam kasus di mana warna biasanya membantu membedakan informasi, seperti dalam grafik atau bagan. Menambahkan elemen pola atau tekstur akan membantu elemen menonjol.

Gunakan Simbol dan Label Semuanya

Pelabelan yang jelas adalah praktik terbaik untuk mengarahkan setiap pengguna melalui perjalanan pelanggan, termasuk mereka yang buta warna. Label dapat membantu membedakan informasi yang biasanya disampaikan dengan warna. Ini berlaku untuk visualisasi data, seperti grafik, atau untuk memandu pengguna di halaman web. Tanyakan pada diri Anda apakah pengguna dapat menemukan jalan mereka tanpa petunjuk warna yang Anda berikan.

Dari sudut pandang e-niaga, Anda juga harus memberi label pada produk Anda dengan informasi deskriptif yang jelas. Jangan mengandalkan foto produk untuk menceritakan keseluruhan cerita; label warna produk.

Pikirkan Kembali Tombol CTA Anda

Ajakan bertindak (CTA) merupakan bagian integral dari desain interaktif. Jika pengguna tidak dapat menemukannya atau tidak memahaminya, mereka tidak akan maju dalam perjalanan, dan Anda tidak akan mencapai tujuan. Anda perlu menarik perhatian ke CTA Anda, dan banyak desainer mengandalkan warna untuk melakukannya.

Desain UI yang baik mengimplementasikan warna tetapi juga menggunakan satu atau lebih teknik menonjol lainnya untuk tombol CTA ini:

• Ukuran
• Penempatan
• Kontras berat
• Batas tertimbang
• Font berbobot
• Ikon simbolis
• Efek arahkan kursor

Teknik ini bekerja pada pengguna buta warna dan non-buta warna, dan Anda dapat menggunakannya untuk elemen halaman lain yang ingin Anda perhatikan.

Garis Bawahi Tautan Itu

Jika Anda membaca blog apa pun, termasuk blog ini, Anda akan melihat bahwa tautan disorot untuk memberi tahu pengguna tentang keberadaan mereka. Cara paling umum untuk menekankan tautan adalah dengan warna. Untuk ini, gunakan warna biru karena kebanyakan orang dengan gangguan penglihatan warna dapat melihatnya.

Ini untuk pengguna dengan achromatopsia atau monochromacy, meskipun bentuk buta warna yang lebih jarang, penekanan warna itu tidak akan cukup. Untuk orang-orang ini, tautan berwarna tampak abu-abu dan tidak dapat dibedakan dari teks lain. Anda dapat dengan cepat menyelesaikan ini dengan menggarisbawahi teks jangkar Anda.

Pertimbangkan Minimalis

Minimalisme jauh dari kata baru. Estetika telah menjadi tren selama beberapa dekade, melalui arsitektur, seni, dekorasi interior, dan tentu saja, desain.

Dan sekarang, minimalis memiliki peran dalam aksesibilitas warna karena semakin sedikit warna yang ada, semakin kecil kemungkinan terjadinya kebingungan. Ini juga menarik secara gaya dan tidak terlalu mengganggu, menjadikannya pilihan yang solid untuk semua audiens.

Anda tidak diharuskan untuk mengikuti desain minimalis agar dapat diakses, tetapi ini adalah salah satu cara yang berhasil.

Gunakan Simulator Buta Warna

Saat komunitas desain bekerja menuju pengalaman pengguna yang dapat diakses, banyak alat hebat telah muncul untuk membantu. Simulator buta warna, misalnya, memungkinkan desainer untuk melihat desain mereka seperti pengguna buta warna. Salah satu simulator tersebut, Oracle, tersedia untuk Mac, Windows, dan Linux. Gunakan simulator buta warna untuk menguji pekerjaan Anda selama proses desain dan memahami bagaimana pengguna berinteraksi dengan pilihan Anda.

Saat memutuskan palet warna Anda di tahap awal, sebaiknya gunakan alat pemilih warna yang mengevaluasi pilihan Anda sesuai dengan pedoman AA. Pemeriksa kontras ini dapat memberi tahu Anda rasio kontras Anda, dan pembuat warna yang dapat diakses ini menyarankan kombinasi warna yang bekerja lebih baik.

Jadikan Situs Web Anda Dapat Diakses

Merancang untuk buta warna memastikan bahwa situs web Anda memberikan pengalaman pengguna yang dapat dinavigasi dan dinikmati oleh seluruh audiens Anda. Bagi mereka, itu berarti merek yang dapat mereka andalkan; bagi Anda, itu berarti konversi yang berhasil. Bergantung pada ukuran perusahaan Anda, itu juga bisa berarti mengikuti hukum. Terlepas dari itu, ini adalah bagian dari membangun lingkungan online yang adil dan setara.

Aksesibilitas warna hanyalah salah satu elemen dalam membangun situs web yang ramah. Pastikan untuk membaca panduan kami tentang membuat konten Anda dapat diakses oleh komunitas tunarungu dan HOH.